Javascript高级编程学习笔记（89）—— Canvas(6) 变换

变换

通过上下文的变化,可以对图像进行处理后再将其绘制到画布上

当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制.

 

而当我们为上下文应用变换时,会导致使用不同的变换矩阵进行处理,从而产生不同的结果

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只会保存上下文中的相关信息,并不会保存绘制的内容