zoukankan      html  css  js  c++  java
  • 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只会保存上下文中的相关信息,并不会保存绘制的内容      

  • 相关阅读:
    了解Android_09之GridView(网格视图)
    了解Android_08之ListView(列表视图)
    了解Android_07之ImageView与使用glide第三方库加载网络图片
    了解Android_06之CheckBox
    了解Android_05之RadioButton
    了解Android_04之EditText标签
    了解Android_03之Button标签
    了解Android_02之TextView标签
    了解Android_01之HelloWorld
    02_vue本地应用(v-text,v-html,v-on,v-show,v-if,v-bind,v-for,v-model)
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10545866.html
Copyright © 2011-2022 走看看