html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
发布时间：2020-09-23 22:05:53 所属栏目：编程 来源：网络整理
导读：在学画画的时辰，线条是最根基的了，而线条的毗连可以构成任何图形。在Canvas中也是云云,接下来为您具体先容最简朴的线条的画法
|
看到了吧，越粗的边线，他的角的圆弧越大。 假如我想Canvas内里的边线也和PS这种一样，有没有步伐呢？虽然有，就是lineJoin属性。 lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6： 毫无疑问我们一下就能大白我们的矩形用的是尖角，以是试着把他改成圆角看看： 图形酿成了这样，图7： 有点像PS的了吧？ 其它，通过前面图我们相识到，Canvas的线条两头是平的，可不行以改呢？事实平的欠悦目。 也是可以的，即lineCap属性，这个就是界说线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8 看图就能发明，着实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头城市伸出去一截，这一节是多长呢？就是线条宽度的一半。 你有没有想到什么？哈哈，前面的闭合路径的题目，假如我们把lineCap设为方头，结果也是一样的！ 但为了保险起见，我们照旧要把路径闭合了，牢记！ 我还要提示一下：闭合的路径没有端点！以是闭合的路径上看不到端点的样式。 其它：lineCap与lineJoin有点相似，留意不要搞混。 假如你眼尖而且命运欠好，你也许会发明偶然辰1像素的线条不是1像素宽，仿佛要宽一些，恍惚一些。如图9： （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
