上下文变换可以操作绘制在画布上的图像。2D 绘图上下文支持所有常见的绘制变换。在创建绘制
上下文时,会以默认值初始化变换矩阵,从而让绘制操作如实应用到绘制结果上。对绘制上下文应用变
换,可以导致以不同的变换矩阵应用绘制操作,从而产生不同的结果。
以下方法可用于改变绘制上下文的变换矩阵。
rotate(angle):围绕原点把图像旋转angle 弧度。
scale(scaleX, scaleY):通过在x 轴乘以scaleX、在y 轴乘以scaleY 来缩放图像。scaleX
和scaleY 的默认值都是1.0。
translate(x, y):把原点移动到(x, y)。执行这个操作后,坐标(0, 0)就会变成(x, y)。
transform(m1_1, m1_2, m2_1, m2_2, dx, dy):像下面这样通过矩阵乘法直接修改矩阵。
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):把矩阵重置为默认值,再以传入的
参数调用transform()。
变换可以简单,也可以复杂。例如,在前面绘制表盘的例子中,如果把坐标原点移动到表盘中心,
那再绘制表针就非常简单了:
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”);
// 创建路径
context.beginPath();
// 绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
// 绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
// 移动原点到表盘中心
context.translate(100, 100);
// 绘制分针
context.moveTo(0, 0);
context.lineTo(0, -85);
// 绘制时针
context.moveTo(0, 0);
context.lineTo(-65, 0);
// 描画路径
context.stroke();
}
把原点移动到(100, 100),也就是表盘的中心后,要绘制表针只需简单的数学计算即可。这是因为所
有计算都是基于(0, 0),而不是(100, 100)了。当然,也可以使用rotate()方法来转动表针:
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”);
// 创建路径
context.beginPath();
// 绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
// 绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
// 移动原点到表盘中心
context.translate(100, 100);
// 旋转表针
context.rotate(1);
// 绘制分针
context.moveTo(0, 0);
context.lineTo(0, -85);
// 绘制时针
context.moveTo(0, 0);
context.lineTo(-65, 0);
// 描画路径
context.stroke();
}
因为原点已经移动到表盘中心,所以旋转就是以该点为圆心的。这相当于把表针一头固定在表盘中
心,然后向右拨了一个弧度。
所有这些变换,包括fillStyle 和strokeStyle 属性,会一直保留在上下文中,直到再次修改
它们。虽然没有办法明确地将所有值都重置为默认值,但有两个方法可以帮我们跟踪变化。如果想着什
么时候再回到当前的属性和变换状态,可以调用save()方法。调用这个方法后,所有这一时刻的设置
会被放到一个暂存栈中。保存之后,可以继续修改上下文。而在需要恢复之前的上下文时,可以调用restore()方法。这个方法会从暂存栈中取出并恢复之前保存的设置。多次调用save()方法可以在暂
存栈中存储多套设置,然后通过restore()可以系统地恢复。下面来看一个例子:
context.fillStyle = “#ff0000”;
context.save();
context.fillStyle = “#00ff00”;
context.translate(100, 100);
context.save();
context.fillStyle = “#0000ff”;
context.fillRect(0, 0, 100, 200); // 在(100, 100)绘制蓝色矩形
context.restore();
context.fillRect(10, 10, 100, 200); // 在(100, 100)绘制绿色矩形
context.restore();
context.fillRect(0, 0, 100, 200); // 在(0, 0)绘制红色矩形
以上代码先将fillStyle 设置为红色,然后调用save()。接着,将fillStyle 修改为绿色,坐
标移动到(100, 100),并再次调用save(),保存设置。随后,将fillStyle 属性设置为蓝色并绘制一
个矩形。因为此时坐标被移动了,所以绘制矩形的坐标实际上是(100, 100)。在调用restore()之后,
fillStyle 恢复为绿色,因此这一次绘制的矩形是绿色的。而绘制矩形的坐标是(110, 110),因为变换
仍在起作用。再次调用restore()之后,变换被移除,fillStyle 也恢复为红色。绘制最后一个矩形
的坐标变成了(0, 0)。
注意,save()方法只保存应用到绘图上下文的设置和变换,不保存绘图上下文的内容。