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只会保存上下文中的相关信息,并不会保存绘制的内容
Javascript高级编程学习笔记(89)—— Canvas(6) 变换的更多相关文章
- Javascript高级编程学习笔记(94)—— Canvas(11) 合成
合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...
- Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据
模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...
- Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...
- Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文
2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- Javascript高级编程学习笔记(91)—— Canvas(8) 阴影
阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...
随机推荐
- verilog function功能函数写法
:] sm2tc; :] din; :] dp; :] dn; :] dout; begin dp = {'b0, din[14:0]}; dn = ~dp + 'b1; dout = (din[] ...
- linux环境给mongodb创建索引
首先我们来了解索引,如果有基础的可以直接看最后面的操作. 可参照 DoNotStop 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/u013725455/artic ...
- 自己动手写Redis客户端(C#实现)3 - GET请求和批量回复
实现代码(C#) 1.发送GET指令 string keyGet = "SetKeyTest"; // 设置 的key StringBuilder sbSendGet = new ...
- 分支界定( BRANCH-AND-BOUND)
分支定界法(branch and bound)是一种求解整数规划问题的最常用算法.这种方法不但可以求解纯整数规划,还可以求解混合整数规划问题.分支定界法是一种搜索与迭代的方法,选择不同的分支变量和子问 ...
- vuex脑图
- Django----列表分页(使用Django的分页组件)
目的:是为了实现列表分页 1.定制URL http://127.0.0.1:8000/blog/get_article?page=3之前定制URL是在url后增加了/id,这次使用参数的方式 def ...
- SSH免密登录实现
现在先想要把项目部署到linux系统中 通过使用maven添加tomcat插件可以做到,右击项目 配置这里的url,是部署到哪里的意思(比如我们现在将这个项目部署到以下系统的tomcat中) 此处只有 ...
- meta标签整合
<title>名称</title>(便于搜索) <meta name="keywords" content="内容"> ke ...
- 记录一次大量CLOSE_WAIT的情况
近期的项目中,有一个特殊的需求,对于每个客户端程序有若干个机构,对于每个机构有不同的客户端证书,程序间隔一段时间向服务端进行请求,根据请求的成功与否更新各机构的状态(如正常,证书未配置,证书过期等). ...
- ODM、JDM、OEM概念
OEM (Original Equipment Manufacturer) - 原始设备制造商 委托生产,或者说“代工生产”,其含义是品牌厂商不直接制造产品,而是负责设计和开发新产品,控制销售“渠道” ...