变换(Transformations)
Canvas的变换基于直接操纵坐标系统。在移动一个矩形的同时，你移动的不仅是该元素，同时也将整个坐标系移位，除非重新绘制该矩形坐标系才会重置。3种基本变换为scale()、rotate()及translateo。
context.scale(x,y)context.rotate(angle)context.translate^,y)使用scaleo进行缩放时，
宁波网站建设需要用到两个系数作为参数，以完成x及y轴上的尺寸改变；使用rotateO进行旋转则需要用到顺时针旋转的角度，而使用translateO移动需要用到以像素为单位的x值及y值来定义基于坐标轴的偏移。若将此3种方法合在一起进行变换，该变换会以相反顺序进行：你得倒着写相应的JavaScript代码。
如果要先进行缩放然后旋转，其代码应当如下：
context.rotate()；context.scale(0.75)；context.fillRect(0,,150)；如果要先旋转然后移动，JS代码如下：
context.translate(0)；context.rotate(0.)；context.fillRect(0,,);任何情况下，一旦涉及旋转，你都应格外小心。因为旋转总是以原点o/o作为旋转中心来展开的，所以根据经验来说，旋转通常都应为最后一步。图6的案例中使用了这3种基本方法，从不同角度展现了约塞米蒂照片。
代码清单展示了图6中简短的源代码。
代码清单图6的变换源代码
image.onload=function(){varrotate=15;varscaleStart=;varscaleEnd=jvarscalelnc=(scaleEnd-scaleStart)/(360/rotate);vars=scaleStart;for(vari=0;i〈=360;i+=rotate){s+=scalelnc;context.translate(540,);context.scale(s,s);context.rotate(i*-l*Math.PI/l80);context.drawlmage(image,20);context.setTransform(l,,);}；}
在图像加载完毕同时，我们将旋转角度定为15°,scaleStart定义起始缩放系数为，scaleEnd定义结束缩放系数为。在旋转过程中，实际的缩放系数scalelnc不断随之递增，并在旋转结束时最终达到。在for循环中我们将图像每次逆时针旋转15°,并将其从逐步缩放至,同时将其左上角设为坐标60。
那么for循环中最后的setTransform()方法是做什么用的呢？
除了基本变换方法scale()、rotate()及translate()之外，Canvas还提供其他两种用来改变坐标系以实现变换矩阵(transformationmatrix)的方法：transformo以及setTransform()-代码清单中已经用到过了。
context.transform(mll,ml2,m21,m22,dx,dy);context.setTransform(mll,ml2,m2l,m22,dx,dy);两者都拥有参数mil、ml2、m21、m22、dx以及dy，对应表中列出的变换属性。
两者主要不同之处是：transformo通过乘法来改变当前矩阵，而setTransform()则将新矩阵覆盖在原有矩阵上。
3种基本方法同样也可以用transform()或setTransform()来实现，因此你也可以把它们当成是某种变换矩阵的快捷方式。表列出了这些相对应的方法和矩阵，还包括了其他一些有用的方法，例如翻转(flipX/Y)和倾斜(skewX/Y)。角度仍然用度数表示。
在用详细案例进一步说明Canvas变换之前，需要注意的是:根据规范，getlmageDataO及putlmageDataO都不受变换影响。无论坐标系是否被位移、缩放、或旋转，getImageData(0)永远会得到x像素的正方形并位于画布的左上角。putImageData(imagedata,)同样如此，图像的描点永远位于画布左上角。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
