html5中用画布画水晶立方体,使用html5的fillRect和setTransform画立方体

原理分析：

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

代码如下：

你的浏览器不支持canvas….

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();