Canvas变形
变形是一种更强大的方法,可以将原点移动到另一点,还能对网格进行旋转和缩放
保存状态
在变形之前需要对状态进行保存 否则无法恢复
状态的保存save()
和恢复restore()
方法是用来保存和恢复 canvas 状态的,方法不需要参数。
可以理解为就是对canvas 状态的快照进行保存和恢复
Canvas的状态是存储在栈中的,每次调用save()
方法后,当前的状态都会被推送到栈中保存起来。
一个绘画状态包括:
应用的变形:移动、旋转、缩放、strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline、direction、imageSmoothingEnabled等。
应用的裁切路径:clipping path
ctx.fillStyle = 'skyblue'
ctx.fillRect(10, 10, 300, 100);
ctx.save(); // 保存状态
ctx.fillStyle = "#ee7034";
ctx.fillRect(10, 150, 300, 100);
ctx.restore(); // 还原到上次保存的状态
ctx.fillRect(10, 300, 300, 100);
注:保存和恢复可以多次调用, 需要注意的是每一次调用 restore 方法,上一个保存的状态就从栈中弹出,所有设定都恢复。
移动、旋转和缩放
translate(x, y)
移动,x 是左右偏移量,y 是上下偏移量。
rotate(angle)
旋转,angle是旋转的角度,它是顺时针旋转,以弧度为单位的值。
scale(x, y)
缩放,x 为水平缩放的值,y 为垂直缩放得值。x和y的值小于1则为缩小,大于1则为放大。默认值为 1。
ctx.fillStyle = 'skyblue'
ctx.save(); // 保存状态
ctx.save(); // 保存状态
// ctx.fillRect(10, 10, 300, 100);
ctx.fillStyle = "#ee7034";
ctx.translate(200, 300)
ctx.fillRect(10, 150, 300, 100);
ctx.restore(); // 还原到上次保存的状态
ctx.rotate(Math.PI / 4)
ctx.fillRect(10, 10, 300, 100);
ctx.restore(); // 还原到上次保存的状态
ctx.scale(1.1, 1.1)
ctx.fillRect(10, 20, 300, 100);
// save()保存的状态是可以多次保存的,同时保存在栈中的元素遵循的是后进先出的顺序;
// 旋转的中心点始终是 canvas 的原点;缩放如果是负值的话,则是一个镜像的效果
transform、setTransform、resetTransform
transform(a, b, c, d, e, f)
能将当前的变形矩阵乘上一个基于自身参数的矩阵
矩阵的计算转换为方程式是:
a, c, e
[ b, d, f ]
0, 0, 1
转换后的坐标的x为:x` = ax+cy+e;
转换后的坐标的y为:y` =bx+cy+f;
setTransform(a, b, c, d, e, f)
将当前变形矩阵重置为单位矩阵,然后用相同的参数调用 transform 方法
resetTransform()
重置当前变形为单位矩阵。效果等同于调用 setTransform(1, 0, 0, 1, 0, 0)
需要注意的是transform方法和setTransform方法中如果任意一个参数是无限大(Infinity),那么变形矩阵也必须被标记为无限大,否则会抛出异常。
参数说明:
a:水平方向的缩放
b:竖直方向的倾斜偏移
c:水平方向的倾斜偏移
d:竖直方向的缩放
e:水平方向的移动
f:竖直方向的移动