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让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
JS 实现微信扫一扫功能
2018/09/14 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python书单 不将就
2017/07/11 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
什么是组件架构
2016/05/15 面试题
安全生产先进个人材料
2014/02/06 职场文书
鸿星尔克广告词
2014/03/21 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
会计学毕业生求职信
2014/06/25 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python