变换矩阵是专门用来实现图形变形的，它与坐标一起配合使用，以达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个变换矩阵进行修改，那么接下来绘制的图形将以画布的最左上角的坐标为原点绘制图形，绘制出来的图形也经过缩放、变形的处理，但是如果对这个变换矩阵进行修改，那么情况将会不一样。
使用图形上下文对象的transform方法修改变换矩阵，该方法的定义如下：
transform（m11，m12，m21，m22，dx，dy）
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形式如下：
其中m11、m21、m12、m22四个参数用来修改使用这个方法之后绘制图形时的计算方法，以达到变形目的；dx与dy参数移动坐标原点，dx表示将坐标原点在x轴上向右移动x个单位，dy表示将坐标原点在y轴上向下移动y个单位。默认情况下其以像素为单位。
下面的实例介绍transform方法的工作原理。在本例中，用循环方法绘制了几个圆弧，圆弧的大小与位置均不变，只是使用了transform方法让坐标原点每次向下移动10个像素，以使绘制出来的圆弧相互重叠，然后对圆弧设置七彩颜色，使这些圆弧的外观达到彩虹的效果。代码如下：(www.xing528.com)
其运行结果如图8.18所示。
图8.18 用transform实现坐标平移
下面的实例介绍了setTransform的具体的使用方法。在本例中首先创建一个红色边框的长方形，然后将该长方形顺时针旋转45度，绘制出一个新的长方形，并且绘制其边框为绿色，然后将红色长方形扩大2.5倍绘制新的长方形，边框为蓝色，最后在红色长方形的右下方绘制同样大小的长方形，边框为灰色。代码如下：
其运行结果如图8.19所示。
图8.19 用transform属性实现图形变换
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
