和setTransform类似的还有一个方法transform()，它们都有六个参数。但是不同的是每次调用 transform() 时，它都会在前一个变换矩阵上构建。如下代码中先绘制的红色矩形和上图的位置是一致的，画完红色矩形后，再次调用transform(1,Math.PI/6,-Math.PI/6,1,30,10)改变画布，这次变换是在当前画布状态上变换的所以画的蓝色矩形不会和红色的重叠。如下图看上去，红色和黄色的相对位置 与 蓝色和红色的相对位置 是一样的。

1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3 4 ctx.fillStyle="yellow"; 5 ctx.fillRect(0,0,250,100) 6 7 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10); 8 ctx.fillStyle="red"; 9 ctx.fillRect(0,0,250,100); 10 11 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10); 12 ctx.fillStyle="blue"; 13 ctx.fillRect(0,0,250,100);

对canvas绘图感兴趣的，还可以参看此博文