HTML5 Canvas变形

1、html5 canvas变形变形（即transform()）是一个不太常用的办法。在介绍此办法之前，有须要向读者介绍一下变形矩阵的概念（这里涉及图形学学问，若无爱好可以跳过）。 在数学上，矩阵是指纵横罗列的二维数据表格，最早来自方程组的系数和常数所组成的方阵，其主要作用就是简化线性方程组的求解。矩阵类似数据库表，是一组行列数字的集合。按照矩阵的行列长度，可以将n行n列矩阵称为n×n矩阵。其中行向量是一个n×1的矩阵，列向量为1×n的矩阵。 矩阵有多种运算方式。普通状况下，加法运算用于图像的平移，而乘法运算则用于图形的变形操作。做矩阵乘

2、法运算时，必需满足第一个矩阵的列数应等于其次个矩阵的行数。对于变形矩阵，这里以缩放为例来加以解释。参照上一节示例，欲将元素放大2倍，普通用法ctx.scale(2,2)即可。对于本来的元素，其自身有一个坐标(x,y)，我们将其作为一个一行两列的矩阵ax,y，目标坐标为(2x,2y)，再将其看成一个矩阵b2x,2y，则其变形矩阵为一个2×2矩阵。回到transform()办法，此办法有6个参数，即transform(m11, m12, m21, m22, m13,m23)。 这6个参数的详细解释如下： transform()的参数解释：m11 控制元素的x轴方向大小。正数是放

3、大，负数是缩小m12 控制元素的旋转。正数表示顺时针，负数表示逆时针m21 控制元素的倾斜。正数表示向右倾斜，负数表示向左倾斜m22 控制元素的y轴方向大小m13 控制元素的x轴坐标位置m23 控制元素的y轴坐标位置 translate()、scale()和rotate()等canvas办法都是transform()的特例。下面比较解释一下这些参数。q 坐标转换translate(dx,dy)相当于 transform(1,0,0,1,dx,dy)。q 缩放scale(sx,xy)相当于 transform(sx,0,0,sy,0,0)。q 旋转rotate(a)相当于transform(co

4、sa,sina,-sina,cosa,0,0)。以(dx,dy)为基准点旋转角度a，则表达式为transform(cosa, sina, -sina, cosa, dx(1-cosa) + dysina, dy(1-cosa) - dxsina);以(dx,dy)为基准点举行(sx,sy)比例缩放，则表达式为transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy); 这里有须要介绍一下settransform()办法，它与transform()办法是组合办法，它的参数也与transform()办法的参数一样。在用法时应复位当前矩阵，然后再用相同的参数去调用transform()办法，此处不再具体介绍。 下面给出一个示例来解释transform()的缩放运用，代码如下：ctx.fillstyle = &39;rgba(0, 0, 0, 0.2)&39;ctx.fillrect(0, 0, 200, 200);ctx.save();ctx.transform(2,0,0,2,0,0);ctx.fillstyle = &39;rgba(0,