变换
通过上下文的变化,可以对图像进行处理后再将其绘制到画布上
当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制.
而当我们为上下文应用变换时,会导致使用不同的变换矩阵进行处理,从而产生不同的结果
canvas 上下文为我们提供了以下方法来修改变换矩阵:
- ratate(angle): 围绕原点将绘制的图像旋转 angle 弧度
- scale(scaleX, scaleY): 缩放图像,在x方向乘以 scaleX , y方向乘以 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
- 以上矩阵的参数代表的含义如下:
- m1_1 水平缩放
- m2_1 水平倾斜
- m1_2 垂直倾斜
- m2_2 垂直缩放
- dx 水平偏移
- dy 垂直偏移
- setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy): 先将变换矩阵设置为默认值,在对其调用 transform 方法
此处我们还是以之前绘制时针的例子为例,当我们绘制时钟的,时针和分针时只需要变换原点就可以不用每次添加偏移量了,代码如下:
var drawing = document.getElementById("drawing"); // 确定浏览器对canvas的支持
if(drawing.getContext){
var 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();
}
需要注意的是 变换操作和之前的 strokeStyle 和 fillStyle 一样,都会对当前上下文一直生效
除非再对其进行修改
此外,canvas 中没有什么方法将其重置回初始值,但是提供了以下方法,以完成类似功能
- save() : 保存当前上下文的信息,并将其存入一个堆栈结构
- restore() : 将当前上下文恢复为上一个 save 保存的状态,相当于 pop 操作
需要注意的是save只会保存上下文中的相关信息,并不会保存绘制的内容