分享更有价值
被信任是一种快乐

HTML5中如何用路径描画线条

文章页正文上

这篇文章主要介绍“HTML5中如何用路径描画线条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中如何用路径描画线条”文章能帮助大家解决问题。
对于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);
conte免费云主机、域名xt.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”弯角效果。关于“HTML5中如何用路径描画线条”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: PHP中如何使用foreach()跳出本次或当前循环与终止循环

这篇文章主要介绍PHP中如何使用foreach()跳出本次或当前循环与终止循环,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   PHPforeach()跳出本次或当前循环与终止循环方法   PHP中用foreach()循环中,想要在循…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册