|
;;
ctx.fillRect(0,0,length,height);
// 复原
ctx.transform(1,0,0,1,0-(xTanslate + deltaXTranslate), 0-(yTanslate + deltaYTranslate));
// 左面
ctx.fillStyle="yellow";
ctx.transform(1,Math.tan(angle),0,1,xTanslate ,yTanslate );
ctx.fillRect(0,0, deltaXTranslate,height);
// 复原
ctx.transform(1,-Math.tan(angle),0,1,0,0);
ctx.transform(1,0,0,1, 0-xTanslate , 0-yTanslate );
// 顶面
ctx.fillStyle="#ACE";
ctx.transform(1,0,Math.tan(Math.PI/2 - angle),1, xTanslate ,yTanslate);
ctx.fillRect(0,0,length,width);
// 复原
ctx.transform(1,0,-Math.tan(Math.PI/2 - angle),1,0,0);
ctx.transform(1,0,0,1, 0-xTanslate , 0-yTanslate );
</script>
</body>
</html>
下面是一个 Canvas transform 和 CSS transform 对照的例子：
|