使用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>