原理分析：
畫三個長方形，頂部長方形和側(cè)面長方形變形，然后將三個長方形移到合適的位置，這樣一個長方體就完成了

代碼如下：
<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>