Canvas 图形变换

图形学领域倾向于对于任何图形的绘制都先绘制图形的基本轮廓，再用图形变换的方式把它绘制成需求的大小。

基本的图形变换：

位移translate ( x ,y )：把图像原点位移到( x ,y )的位置 旋转rotate ( deg )：旋转deg的度数 缩放scale ( sx ,sy)：在横向进行sx倍的缩放，在纵向进行sy倍的缩放。

scale缩放具有副作用，体现在scale不仅缩放图像大小，而且对于其他数值属性也有影响，比如左上角的坐标属性和图像边框大小等。

注：canvas的图形变换是叠加的

context.fillStyle="red";
context.translate(100,100);
context.fillRect(0,0,400,400);

context.fillStyle="green";
context.translate(300,300);
context.fillRect(0,0,400,400);

上述代码中描绘的第二个正方形的原点将移动到(400,400)的位置。如果要使第二个正方形的原点将移动到(300,300)的位置，可以使用context.save()和context.restore()。

- context.save()：保存当前的图形状态

- context.restore()：和context.save()成对出现，恢复save()保存的所有状态

context.save();
context.fillStyle=”red”;
context.translate(100,100);
context.fillRect(0,0,400,400);
context.restore();

context.save()
context.fillStyle=”green”;
context.translate(300,300);
context.fillRect(0,0,400,400);
context.restore();

可以在context.save()和context.restore()之间任意的绘制图形效果而不会影响到后面的图形绘制。

变换矩阵

在不进行图形变换的情况下，变换矩阵相当于单位矩阵，当我们想对一个图形进行变换的时候，只要对变换矩阵相应的参数进行操作，操作后对图形中各个顶点的坐标分别乘以这个矩阵算出新的顶点坐标即可。

canvas提供了两个设置变换矩阵的方法：

- transform ( a ,b ,c ,d ,e ,f )

- setTransform( a ,b ,c ,d ,e ,f )

transform()和setTransform()的区别：

使用transform()设置变换矩阵，每次设置是在之前的变换矩阵的基础上进行设置，即transform()设置的变换矩阵可以产生级联的关系。 setTransform()首先将当前矩阵设置为单位矩阵，再根据传进来的参数设置矩阵，即setTransform()会忽略掉前面设置的所有transform()。 <