Canvas 图像变换 ​

以下方法用于图像变换。

• CanvasRenderingContext2D.rotate()：图像旋转
• CanvasRenderingContext2D.scale()：图像缩放
• CanvasRenderingContext2D.translate()：图像平移
• CanvasRenderingContext2D.transform()：通过一个变换矩阵完成图像变换
• CanvasRenderingContext2D.setTransform()：取消前面的图像变换

1.rotate() ​

CanvasRenderingContext2D.rotate()方法用于图像旋转。它接受一个弧度值作为参数，表示顺时针旋转的度数。

context.rotate((45 * Math.PI) / 180)
context.fillRect(70, 0, 100, 30)

上面代码会显示一个顺时针倾斜 45 度的矩形。注意，rotate()方法必须在fillRect()方法之前调用，否则是不起作用的。

旋转中心点始终是画布左上角的原点。如果要更改中心点，需要使用translate()方法移动画布。

2.scale() ​

CanvasRenderingContext2D.scale()方法用于缩放图像。它接受两个参数，分别是x轴方向的缩放因子和y轴方向的缩放因子。默认情况下，一个单位就是一个像素，缩放因子可以缩放单位，比如缩放因子0.5表示将大小缩小为原来的 50%，缩放因子10表示放大十倍。

context.scale(10, 3)
context.fillRect(10, 10, 10, 10)

上面代码中，原来的矩形是 10 x 10，缩放后展示出来是 100 x 30。

如果缩放因子为 1，就表示图像没有任何缩放。如果为-1，则表示方向翻转。context.scale(-1, 1)为水平翻转，context.scale(1, -1)表示垂直翻转。

context.scale(1, -2)
context.font = '16px serif'
context.fillText('Hello world!', 20, -20)

上面代码会显示一个水平倒转的、高度放大 2 倍的Hello World!。

注意，负向缩放本质是坐标翻转，所针对的坐标轴就是画布左上角原点的坐标轴。

3.translate() ​

CanvasRenderingContext2D.translate()方法用于平移图像。它接受两个参数，分别是 x 轴和 y 轴移动的距离（单位像素）。

context.fillRect(0, 0, 100, 100)

context.translate(50, 50)
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)

4.transform() ​

CanvasRenderingContext2D.transform()方法接受一个变换矩阵的六个元素作为参数，完成缩放、旋转、移动和倾斜等变形。

它的使用格式如下。

context.transform(a, b, c, d, e, f)
/*
a:水平缩放(默认值1，单位倍数)
b:水平倾斜(默认值0，单位弧度)
c:垂直倾斜(默认值0，单位弧度)
d:垂直缩放(默认值1，单位倍数)
e:水平位移(默认值0，单位像素)
f:垂直位移(默认值0，单位像素)
*/

下面是一个例子。

context.transform(2, 0, 0, 1, 50, 50)
context.fillRect(0, 0, 100, 100)

上面代码中，原始图形是 100 x 100 的矩形，结果缩放成 200 x 100 的矩形，并且左上角从(0, 0)移动到(50, 50)。

注意，多个transform()方法具有叠加效果。

5.setTransform() ​

CanvasRenderingContext2D.setTransform()方法取消前面的图形变换，将画布恢复到该方法指定的状态。该方法的参数与transform()方法完全一致。

context.translate(50, 50)
context.fillRect(0, 0, 100, 100)

context.setTransform(1, 0, 0, 1, 0, 0)
context.fillRect(0, 0, 100, 100)

上面代码中，第一个fillRect()方法绘制的矩形，左上角从(0, 0)平移到(50, 50)。setTransform()方法取消了这个变换（已绘制的图形不受影响），将画布恢复到默认状态（变换矩形1, 0, 0, 1, 0, 0），所以第二个矩形的左上角回到(0, 0)。