绘制变形图形
坐标变换
绘制图形的时候,我们可能会想要旋转图形,或对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,可以实现这种效果。
在计算机上绘制图形的时候,是以坐标单位为基准来进行图形绘制的。默认情况下,Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理,就可以实现图形的变形处理了。对坐标的变换处理有三种方式:
平移
使用图形上下文对象的translate()方法移动坐标轴原点。该方法的定义如下:
context.translate(x, y);
该方法使用两个参数,x表示将坐标轴原点向左移动多少个单位,默认情况下为像素;y表示将坐标轴原点向下移动多少个单位。
缩放
使用图形上下文对象的scale()方法将图形进行缩放。该方法的定义如下:
context.scale(x, y);
该方法使用两个参数,x是水平方向的缩放倍数,y是垂直方向的缩放倍数。要缩小图形的时候,将这两个参数设置为0到1之间的小数就可以了,例如0.5是指将图形缩小一半。
旋转
使用图形上下文对象的rotate()方法将图形进行旋转。该方法的定义如下:
context.rotate(angle);
该方法接受一个参数,该参数是指放置的角度,放置的中心是坐标轴的原点。放置是以顺时针方向进行的,要想逆时针旋转时,将该参数设置为负数就可以了。
坐标变换示例如下所示:
Canvas.prototype.translate = function(x, y) { this.context.translate(x, y); return this; }; Canvas.prototype.scale = function(x, y) { this.context.scale(x, y); return this; }; Canvas.prototype.rotate = function(x, y) { this.context.rotate(x, y); return this; }; $(function() { var canvas = new Canvas("draw"); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400).translate(200, 50).fillStyle('rgba(255, 0, 0, 0.25)'); for(var i = 0; i < 50; i++) { canvas.translate(25, 25).scale(0.95, 0.95).rotate(Math.PI / 10).fillRect(0, 0, 100, 50); } });
坐标变换与路径的结合使用
如果要对矩形进行变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变换的时候,要考虑的事情就比较多了。因为使用了坐标变换之后,已经创建好的路径就不能用了。必须要重新创建路径。重新创建路径之后,坐标变换方法又失效了。这时必须先另外写一个创建路径的函数,然后在坐标变换的同时调用该函数,这样才能解决这个问题。使用示例如下所示:
$(function() { var create5Star = function(context) { var dx = 100, dy = 0, x, y, s = 50, dig = Math.PI / 5 * 4; context.beginPath().fillStyle('rgba(255, 0, 0, 0.5)'); for(var i = 0; i < 5; i++) { x = Math.sin(i * dig) * s + dx; y = Math.cos(i * dig) * s + dy; context.lineTo(x, y); } context.closePath(); }; var canvas = new Canvas("draw"); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400).translate(200, 50); for(var i = 0; i < 50; i++) { create5Star(canvas.translate(25, 25).scale(0.95, 0.95).rotate(Math.PI / 10)); canvas.fill(); } });
矩阵变换
矩阵是专门用来实现图形变形的,它与坐标一起配合使用,以达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个变换矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点绘制图形,绘制出来的图形也不经过缩放、变形的处理。使用图形上下文对象的transforms()方法修改变换矩阵,该方法的定义如下:
context.transform(m11, m12, m21, m22, dx, dy);
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算。其中m11, m21, m12, m22四个参数用来修改使用这个方法之后,绘制图形时的计算方法,以达到变形目的,dx与dy参数移动坐标原点,默认以像素为单位。上面所使用坐标变换进行图形变形的技术中所提到的三个方法,实际上是隐式地修改了变换矩阵,都可以使用transform()方法来进行代替。
translate(x, y)
可以使用context.transform(1, 0, 0, 1, x, y)或context.transform(0, 1, 1, 0, x, y)方法进行代替,前面四个参数表示不对图形进行缩放操作,变形操作,将dx, dy设置为x, y表示将坐标原点移至此处。
scale(x, y)
可以使用context.transform(x, 0, 0, y, 0, 0)或context.transform(0, y, x, 0, 0, 0)方法代替,前面四个参数表示将图形横向扩大x倍,纵向扩大y倍。dx, dy为0表示不移动坐标原点。
rotate(angle)
替代方法如下所示:
context.transform(Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180), -Math.sin(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), 0, 0); // 或者 context.transform(-Math.sin(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180), 0, 0);
其中前四个参数以三角函数的形式结合起来,共同完成图形按angle角度的顺时针旋转处理,dx, dy为0表示不移动坐标原点。
使用了transform()方法后,接下来要绘制的图形都会按照移动后的坐标原点与新的变换矩阵相结合的方法进行绘制,必要时可以使用setTransform()方法将变换矩阵进行重置,该方法的定义如下所示:
context.setTransform(m11, m12, m21, m22, dx, dy);
该方法的参数及参数 用法与transform()相同,事实上,该方法的作用为将画布上的最左上角重置为坐标原点,当图形上下文创建完毕时将所创建的初始变换矩阵设置为当前变换矩阵,然后使用transform()方法。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
CSS3 选择器【2】
2011-11-07 14:30 1046UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1280绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1668选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1368使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1454canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1459CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5400Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4600基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4045基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1970基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1811applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1513离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2551本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1561Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1209video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1714音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 892video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4931在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4962在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
html5 canvas涂鸦画板绘制图形效果
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
HTML5 canvas自由绘制图形工具,可拖拽的自由绘图画板。 ·
应用html5画布功能以及脚本语言js在网页上绘制图表并标注
根据用户数据表格html5绘制饼状图形代码 根据用户数据表格html5绘制饼状图形代码 根据用户数据表格html5绘制饼状图形代码
html5 canvas自定义绘制多边图形代码 html5 canvas自定义绘制多边图形代码
html5绘图效果简单绘制图形线条类似百度贴吧涂鸦效果
html5 canvas实现的绘图工具自由绘制图形画板源码.zip
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
HTML5绘制变形图形2.pdf 学习资料 复习资料 教学资源
HTML5绘制变形图形3.pdf 学习资料 复习资料 教学资源
HTML5绘制变形图形2案例.pdf 学习资料 复习资料 教学资源
Html5绘制小型太阳系模型
这是一款基于html5绘制的用户数据表格与饼状图形效果源码,左侧展示用户的数据表格,右侧展示对应的饼状图,该表格图形完全采用HTML5绘制,没有采用任何外部图形元素,是一款非常经典的HTML5图表效果源码。...
HTML5 canvas自由绘制图形工具,可拖拽的自由绘图画板。
XCalc是一款基于HTML5的数学函数图形绘制插件,这款函数图形绘制插件不仅可以绘制简单的加减乘除运算的函数图形,也可以绘制乘方运算和正弦余弦运算的函数图形。XCalc的配置也非常简单,在HTML5图表中应用十分广泛。
实现流程图绘制、拓扑图等自定义绘制功能,具有丰富的的图形选择。
html5 canvas绘制几何图形3d动画特效源码.zip