使用矩阵多次叠加当前变换的方法,矩阵由方法的参数进行描述.你可以缩放,旋转,移动和倾斜上下文.
ctx.transform(1, 0, 0, 1, 0, 0)
Number 水平缩放 (m11)
Number 水平倾斜 (m12)
Number 垂直倾斜 (m21)
Number 垂直缩放 (m22)
Number 水平移动 (dx)
Number 垂直移动 (dy)
可将画布看做矩阵,通过修改矩阵实现对绘画的缩放,旋转,移动,倾斜.
数学中的矩阵概念是m*n个数排列成m行n列,叫m x n矩阵.矩阵有矩阵运算,加,减,乘,转置等等
这个方法通过调整矩阵值来影响canvas绘画行为
参数对应矩阵如下.
a=2,水平缩放
本来是70*50的长方形,缩放后变成140*50.这个方法scale()能达到同样效果.
那为什么还要制作这个方法呢,因为此方法可以将几种变换做累加效果,如果只是需要其中一种变化效果,那调用相应方法就好
当需要做复杂变化时,用这个方法就非常实用.多种变换累加,能得到比较奇特的效果.前提是数学要好
b=Math.PI/6,水平倾斜30度
看起来这种水平倾斜好像是画布旋转了30度,但其实这误会了.这种变换是仿射变换,算法是矩阵乘法
可以这样认为,倾斜前,X,Y轴是互相垂直的,画出的矩形的四个角是都是直角.而水平倾斜30度之后,
x轴不在是水平的,而是有30度倾角,这样一来,就与y轴(不变)不再垂直.那么在这种坐标系内画出的矩形,
看起来是个平行四边形,事实上看就是平等四边形.可以认为坐标系扭曲了.
左边是正常方形,右边是水平倾斜后的样子.
c=Math.PI/6,垂直倾斜30度
同理,垂直倾斜可认为是y轴倾斜了30度,这种坐标系中画出来的矩形就成这种样子
左边是正常方形,右边是垂直倾斜后的样子.
d=2,垂直缩放
与水平缩放相似,垂直方向上变成了2倍
e=20,(dx)水平移动距离
水平移动的效果与translate()方法效果一样,改变了坐标原点
f=20,(dy)垂直移动距离
如果调用了此方法,修改了坐标系,那么后续的绘画都将在新坐标系内进行.如果要还原坐标系,最好在变化前调用save()
完成后调用restore().画布默认参数值是(1, 0, 0, 1, 0, 0)
多次调用会有累加效果,如果不希望这种效果,可以尝试使用,setTransform()
先垂直倾斜30度,再垂直倾斜30度.可见右下的四边形比右上的要更扁