HTML5 Canvas 起步(2) - 路径


Posted in HTML / CSS onMay 12, 2009

这篇将要介绍一下 Canvas 中的基本图形。

图形的基础 - 路径

在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke 方法进行绘制时,都是依据这些路径点来进行填充或画线。

在每次开始绘制路径前,都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加,在填充或画边框时就会出现问题。在绘制完成路径后,可以直接使用 context.closePath() 方法来关闭路径,或者手动关闭路径。另外,如果在填充时路径没有关闭,那么 Context 会自动调用 closePath 方法将路径关闭。

基本路径方法

1. beginPath, closePath

这两个方法在前面已经介绍过,分别用来通知 Context 开始一个新的路径和关闭当前的路径。

在 Canvas 中使用路径时,应该要保持一个良好的习惯,每次开始绘制路径前都要调用一次 beginPath 方法,否则画出来的效果难看不说,还会严重影响性能。

在下面这张图中,左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径,而后面的图形则就只在绘制所有图形前调用了一次 beginPath 来清除路径,因此,虽然这里是使用的边框色是 #666,但是右边的图形颜色比左边的深一些,因为每次使用 stroke 绘制边框时,会把之前的路径再次绘制一遍,叠加起来颜色就比原来深一些。

HTML5 Canvas 起步(2) - 路径


提示:您可以先修改部分代码再运行

在 Context 中路径数较少时,如果不考虑显示效果,性能上还可以接受,但是如果 Context 中的路径数很多时,在开始绘制新路径前不使用 beginPath 的话,因为每次绘制都要将之前的路径重新绘制一遍,这时性能会以指数下降。

因此,除非有特殊需要,每次开始绘制路径前都要调用 beginPath 来开始新路径。

2. 移动与直线 moveTo, lineTo, rect

HTML5 Canvas 起步(2) - 路径


提示:您可以先修改部分代码再运行

void moveTo(in float x, in float y);

在 Canvas 中绘制路径,一般是不需要指定起点的,默认的起点就是上一次绘制路径的终点,因此,如果需要指定起点的话,就需要使用 moveTo 方法来指定要移动到的位置。

void lineTo(in float x, in float y);

lineTo 方法则是绘制一条直接路径到指定的位置。在调用完 lineTo 方法后,Context 内部的绘制起点会移动到直线的终点。

void rect(in float x, in float y, in float w, in float h);

rect 方法用来绘制一个矩形路径,通过参数指定左上角位置以及宽和高。在调用 rect 后,Context 的绘制起点会移动到 rect 绘制的矩形的左上角。

rect 方法与后面要介绍的 arc 方法与其他路径方法有一点不同,它们是使用参数指定起点的,而不是使用 Context 内部维护的起点。

3. 曲线 arcTo, arc, quadraticCurveTo, bezierCurveTo

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

按照 WHATWG 文档的说明,这个方法是画一个与两条射线相切的的圆弧,两条射线其中一条为穿过 Context 绘制起点,终点为 (x1, y1),另外一条为穿过 (x2, y2),终点为 (x1, y1),这条圆弧为最小的与这两条射线相切的圆弧。在调用完 arcTo 方法后,将 圆弧与 射线 (x1, y1)-(x2, y2) 的切点添加到当前路径中,做为下次绘制的起点。

在测试中发现,Firefox 和 Opera 目前对这个方法的支持并不好,只有 Chrome 和 Safari 4 能绘制出正确的路径。

HTML5 Canvas 起步(2) - 路径

图中的的两条灰色直线是偏移 4 个像素后的两条射线所在的位置。


提示:您可以先修改部分代码再运行

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

arc 方法用来绘制一段圆弧路径,通过圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小,这个方法也依赖于 Context 维护的绘制起点。而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为 true 就是逆时针,false 则为顺时针。

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

quadraticCurveTo 方法用来绘制二次样条曲线路径,参数中 cpx 与 cpy 指定控制点的位置,x 和 y 指定终点的位置,起点则是由 Context 维护的绘制起点。

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

bezierCurveTo 方法用来绘制贝塞尔曲线路径,它与 quadraticCurveTo 相似,不过贝塞尔曲线有两个控制点,因此参数中的 cp1x, cp1y, cp2x, cp2y 用来指定两个控制点的位置,而 x 和 y 指定绺的位置。

HTML5 Canvas 起步(2) - 路径


提示:您可以先修改部分代码再运行

4. fill, stroke, clip

fill 与 stroke 这两个方法很好理解,分别用来填充路径与绘制路径线条。

clip 方法用来给 Canvas 设置一个剪辑区域,在调用 clip 方法之后的代码只对这个设定的剪辑区域有效,不会影响其他地方,这个方法在要进行局部更新时很有用。默认情况下,剪辑区域是一个左上角在 (0, 0),宽和高分别等于 Canvas 元素的宽和高的矩形。

HTML5 Canvas 起步(2) - 路径

在画这个图时,虽然两次都是使用 fillRect(0, 0, 100, 100) 填充了一个 100x100 大小矩形,但是显示的结果却是第二次填充的只是中间的一小块,这是因为在两次填充之间使用 clip 方法设定了剪辑区域,这样第二次填充时只会影响到所设定的中间那一小部分区域。


提示:您可以先修改部分代码再运行

5. clearRect, fillRect, strokeRect

这三个方法并不是路径方法,而是用来直接处理 Canvas 上的内容,相当于 Canvas 的背景,调用这三个方法也不会影响 Context 绘图的起点。

要清除 Canvas 上的所有内容时,可以直接调用 context.clearRect(0, 0, width, height) 来直接清除,而不需要使用路径方法绘制一个与 Canvas 同等大小的矩形路径再使用 fill 方法去清除。

结语

通过 Canvas 的路径方法,可以使用 Canvas 处理一些简单的矢量图形,这样在缩放时也不会失真。不过 Canvas 的路径方法也不是很强大,至少连个椭圆的路径都没有……

这篇写得有点长了,Cnavas 中路径相关的内容就写这么多,后面再讲讲 Canvas 其他的东西。

参考资料

1. The Canvas Element, WHATWG

HTML / CSS 相关文章推荐
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 #HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 #HTML / CSS
HTML5中的新元素介绍
Oct 17 #HTML / CSS
自定义html标记替换html5新增元素
Oct 17 #HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 #HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 #HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 #HTML / CSS
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Java实现多文件上传功能
2021/06/30 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL