欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 Canvas——用路径描绘线条实例先容

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

原文:
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”弯角结果。 本文地址:http://itbyc.com/web/html5/13542.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1