HTML5 Canvas——用路径描画线条实例介绍


Posted in HTML / CSS onJune 09, 2013

原文:
http://www.lifelaf.com/blog/?p=371
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Using Paths to Create Lines”

对于HTML5 Canvas,我们可以使用“路径”来描画任何图形。路径,简单来说就是一系列的点以及连接这些点的线。任何Canvas上下文只会有一个“当前路径”,而当context.save()调用时,该“当前路径”并不会被保存。

路径的开始与结束

调用beginPath()可以开始一个路径,而调用closePath()则会令该路径结束。如果连接路径中的点,那么这种连接就构成了一个“子路径”。如果“子路径”中最后一个点与其自身的第一个点相连,我们就认为该“子路径”是“闭合”的。

线条的描绘

最基本的路径操作由反复调用moveTo()和lineTo()命令组成。比如以下这个例子:

复制代码
代码如下:

function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}

在上面的例子中,我们描画了一条水平的、宽度为10个像素的线段;与此同时,我们还设定了lineCap与strokeStyle属性。以下是一些常用的属性列表:

lineCap
lineCap定义了在Canvas中线段两头的样式,可设置为以下三个值中的一个:

butt。默认值;在线段的两头添加平直边缘。
round。在线段的两头各添加一个半圆形线帽。线帽直径等于线段的宽度。
square。在线段的两头添加正方形线帽。线帽边长等于线段的宽度。
lineJoin
lineJoin定义了两条线段相交处的弯角样式。以下为三个可选的值:

miter。默认值;创建一个尖角。可以通过设置miterLimit属性来对尖角长度进行限制 — miterLimit为尖角长度和线条宽度之比的最大值,默认为10。
bevel。创建一个斜角。
round。创建一个圆角。
lineWidth
lineWidth定义了线条的粗细,默认为1.0。

strokeStyle
strokeStyle定义了用于渲染线条的颜色等样式。

译注:当lineJoin设定为miter,但是尖角长度超过了miterLimit的限制时,Canvas将显示“bevel”弯角效果。

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 #HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
You might like
几个学习PHP的网址
2006/11/25 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
twig模板常用语句实例小结
2016/02/04 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
python Celery定时任务的示例
2018/03/13 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python代码太长换行的实现
2019/07/05 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
生产副总岗位职责
2013/11/28 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
革命电影观后感
2015/06/18 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers