canvas基础之变换
2D绘制上下文支持各种基本的绘制变换:
- rotate(angle):围绕原点旋转图像angle弧度。(举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。)
- scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY,scaleX和scaleY的默认值都是1.0。如果对绘图进行缩放,所有之后的绘图也会被缩放,定位也会被缩放。
- translate(x,y):将坐标原点移动到(x,y)。执行这个变换之后,坐标(0,0)会变成之前由(x,y)表示的点。
- transfrom(m1_1,m1_2,m2_1,m2_2,dx,dy):直接修改变换矩阵。
setTransfrom(m1_1,m1_2,m2_1,m2_2,dx,dy):将变换矩阵重置为默认状态,然后在调用transfrom()方法。
在开始绘图前,首先检查浏览器是否支持<canvas>元素。下面所有的例子都在此基础上完成。
<canvas id="drawing" width="400" height="400">A drawing of something</canvas>
<script>
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var ctx = drawing.getContext('2d')
}
</script>
rotate(angle)
将矩形旋转 20 度
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
scale(scaleX,scaleY)
绘制矩形,放大到 200%,然后再次绘制矩形(如果对绘图进行缩放,所有之后的绘图也会被缩放,定位也会被缩放。)。scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
translate(x,y)
在位置 (10,10) 处绘制一个矩形,将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形(注意:现在矩形从位置 (80,80) 开始绘制)。
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
transfrom(m1_1,m1_2,m2_1,m2_2,dx,dy)
绘制一个矩形;通过 transform() 添加一个新的变换矩阵,再次绘制矩形;添加一个新的变换矩阵,然后再次绘制矩形。注意,每当调用 transform() 时,它都会在前一个变换矩阵上构建。
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100) ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100); ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
绘制时钟
在前面一节,我们通过绘制路径实现了简易时钟的绘制,现在,我们继续使用变换来绘制上一次的简易时钟。
//开始绘制
ctx.beginPath();
//绘制外圆
ctx.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
ctx.moveTo(194,100);
ctx.arc(100,100,94,0,2*Math.PI,false);
//变换原点
ctx.translate(100,100);
// 旋转表针
ctx.rotate(1);
//绘制分针
ctx.moveTo(0,0);
ctx.lineTo(0,-85);
//绘制时针
ctx.moveTo(0,0);
ctx.lineTo(-65,0);
// 描边路径
ctx.stroke();
在这里,主要使用到了原点变换和旋转两种简单的变换,首先通过原点变换,把原点变换到时钟表盘的中心点(100,100)后,在同一个方向上绘制线条就变成了简单的数学问题,所有数学计算都基于(0,0),而不是(100,100);其次,在原点变换的基础上,旋转表针,此时的原点是时钟的中心点,所以旋转也是以该点为圆心的,结果就像是表针真的被固定在表盘中心一样,然后向右旋转了一定的角度。这样,我们就得到了下图所示的简易时钟。
canvas基础之变换的更多相关文章
- canvas基础—图形变换
1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
- canvas 基础知识整理(二)
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理(一)
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
- canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
随机推荐
- python 抓取request信息,各种cookie,user-agent类的信息,只调试到http可以抓取,https貌似不行。
import pcap # 安装的是pypcap,本博客有安装方法,不过也比较乱,试试吧.import dpktimport socketimport datetime def sniffer(str ...
- Python的generator生成器
generator保存的是算法,元素仅在使用的时候生成,占用内存小,总元素的个数可以是无限个. 简单的生成器与列表生成式,区别仅在于将中括号[ ],换成小圆括号( ). In [1]: g=(x*x+ ...
- 配置total commander 显示所有或特定文件夹 (带点的文件夹)
在配置|忽略列表 下可以添加或删除需要隐藏的文件夹通配符.
- 史前埃及(predynastic egypt)
一个并不复杂的建造发展游戏,却十分有趣 安排工作-收集资源-招募工人-增加生产资源效率or建设科技-招募工人的模式 地表在建设后有明显的变化 同时也可以通过简单的动画展示工人的工作分配
- 各种C#数组的定义和初始化
各种C#数组的定义和初始化2009-08-26 18:28 岁月联盟 字号:T | T一键收藏,随时查看,分享好友!本文介绍了C#数组定义和初始化,包括一维数组.交错数组和多维数组,供大家参考.AD: ...
- arpg网页游戏特效播放(一)
网页游戏中的特效,主要包括:场景特效,攻击特效和UI特效三种.场景特效是在地图层上播放的特效,攻击特效主要是技能触发的一些特效,UI特效是面板上的一些特效,还有一些在人物身上播放的特效,例如脚底光圈特 ...
- Tomcat必会的企业级配置调优
Tomcat服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选. ======== 完美的分割线 ...
- C++基础之 成员变量初 始化赋值
摘要: C++成员变量 初始化赋值 你都清楚吗?还有好多坑,好多细节也不知道... 今天在写一个类的时候,由于该类的一个成员变量是引用,所以初始化出现了问题,查了一下之后,才发现,原来引用的初始化和c ...
- 备份Windows密钥,重装后免费激活系统教程
最重要的一点:在你重装系统之前,一定要先备份Windows密钥,不然重装系统后就查询不了原来的密钥,从而无法免费激活. 1.查询系统密钥(注册表中查询) 打开 “运行”(快捷键 win + R) 打开 ...
- Unity 3D开发-C#脚本语言的一些基础用法
Unity 中C#语言的一些基础用法 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Lerp -- 线 ...