本文共 1225 字，大约阅读时间需要 4 分钟。

首先我们先来看看两个函数。

1 setTransform()

画布上的每个对象都拥有一个当前的变换矩阵。利用 setTransform() 我们可以缩放、旋转、移动以及倾斜当前对象。

setTransform() 方法会把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

语法：context.setTransform(a,b,c,d,e,f);

2 rotate()

rotate() 方法用于旋转当前的绘图。语法：context.rotate(angle);。angle 旋转弧度。所以如果传入的参数是角度，需要先将其转换为弧度，转换公式为弧度 = 角度 * Math.PI/180 。

3 示例

Steve Fulton 举了这样一个示例：

context.fillStyle = "black";context.fillRect(20, 20, 25, 25);context.setTransform(1, 0, 0, 1, 0, 0);var angleInRadians = 45 * Math.PI / 180;context.rotate(angleInRadians);context.fillStyle = "red";context.fillRect(100, 100, 50, 50);

运行结果：

这里首先绘制了一个黑色矩形，然后调用 setTransform() 方法，接着把画布旋转 45 度，最后绘制红色矩形。

注意：只有 setTransform() 方法调用之后的绘图才有效。所以之前所绘制的黑色矩形并没有被旋转！

因为没有指定旋转原点，所以默认原点在 (0,0) ，导致红色矩形旋转后，有一半的区域移到了画布之外。

4 指定原点

我们可以使用 translate(x,y) 方法来指定变换的原点。改写上面的示例：

const x = 100;const y = 100;const width = 50;const height = 50;context.translate(x + .5 * width, y + .5 * height);context.rotate(angleInRadians);context.fillStyle = "red";context.fillRect(-.5 * width, -.5 * height, width, height);

运行结果：

这里首先修改原点位置为 (125,125)，即从此以后，原来的 (125,125) 变为坐标轴原点，即（0,0）；接着，旋转 45 度；最后在 （-25,-25）坐标处绘制一个矩形。最后就会得到在 (-25,-25) 为起始点处，以 (0,0) 为原点旋转 45 度的矩形。

转载地址：http://hfdcf.baihongyu.com/