首先我们先来看看两个函数。
1 setTransform()
画布上的每个对象都拥有一个当前的变换矩阵。利用 setTransform() 我们可以缩放、旋转、移动以及倾斜当前对象。
setTransform() 方法会把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。
语法：context.setTransform(a,b,c,d,e,f);
| 参数 | 描述 |
|---|---|
| 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 度的矩形。