使用html5的fillRect和setTransform画立方体

原理分析：
画三个长方形，顶部长方形和侧面长方形变形，然后将三个长方形移到合适的位置，这样一个长方体就完成了

代码如下：
<
div style="width: 600px
margin: 0 auto
margin-top: 30px
">

<
canvas id="myCanvas" width="600" height="350" style="border:1px solid
#d3d3d3
">

 
 
你的浏览器不支持canvas....
<
/canvas>
<
/div>

<
script>

 
 
var canvas = document.getElementById('myCanvas')

 
 
var ctx = canvas.getContext("2d")

 
 
ctx.beginPath()

 
 
ctx.fillStyle="
#0000ff"

 
 
ctx.fillRect(120,100,150,200)

 
 
ctx.closePath()


 
 
ctx.beginPath()

 
 
ctx.setTransform(1,0,-0.5,0.5,50,50)

 
 
ctx.fillStyle="red"

 
 
ctx.fillRect(120,0,150,100)

 
 
ctx.closePath()


 
 
ctx.beginPath()

 
 
ctx.setTransform(0,1,-0.5,0.5,320,-70)

 
 
ctx.fillStyle="green"

 
 
ctx.fillRect(120,0,200,100)

 
 
ctx.closePath()


<
/script>