Canvas变形

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);
1
2
3
4
5
6
7

注：保存和恢复可以多次调用， 需要注意的是每一次调用 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 的原点；缩放如果是负值的话，则是一个镜像的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

transform、setTransform、resetTransform

transform(a, b, c, d, e, f)
能将当前的变形矩阵乘上一个基于自身参数的矩阵

矩阵的计算转换为方程式是：

      a, c, e
    [ b, d, f ]
      0, 0, 1
1
2
3

转换后的坐标的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：竖直方向的移动