HTML5 装饰Canvas中图形

装饰图形

Canvas为图形提供了一些默认样式，如线条、填充的默认颜色为黑色等。但是，这些默认样式无法满足所有用户的需求，也无法体现Canvas的灵活性，故Canvas为图形定义了一些属性，以便用户自定义图形的样式。

线条的样式

在绘制线段时，可以通过上下文对象的一些属性来控制线条的宽度、线条的颜色、线条连接点的样式、线帽样式等，各属性的含义见表 4‑2：

表 4‑2 线条的样式属性及含义

属性	含义
lineWidth	线条的宽度，单位为像素，默认值为1.0，并且这个属性必须大于0.0
strokeStyle	线条的样式，可以是颜色、渐变、图案等样式
lineJoin	两条线段的连接点的样式，取值为round（圆角）、bevel（斜角）、miter（尖角），默认值为miter
lineCap	线条两端端点即线帽的样式，用来控制线条末端如何“封顶”，取值我butt（没有线帽）、square（矩形线帽）、round（半圆线帽），默认值为butt。

lineWidth和strokeStyle属性的含义一目了然，就不再赘述了。这里重点对lineJoin和lineCap属性不同取值的含义及效果进行说明。

lineJoin属性的可选值有 bevel | miter | round，默认值为 bevel。如果lineJoin属性的值设置为 bevel，则在两条线段相交时，将会用一条直线来连接两个拐角外部的点，使之构成一个三角形；如果设置为miter，则在bevel效果的基础上，在画一个三角形，使两条线段的连接处变成一个矩形；如果设置为round，则在两条线段的连接处画一段填充好的圆弧。不同取值时，线段连接点的样式示意图如图 4‑17 所示：

图4-17 线段连接点的样式示意

在浏览器中，lineJoin属性不同取值的运行效果如图 4‑18 所示：

图4-18 lineJoin属性不同取值的连接点效果

lineCap属性的可选值有 butt | square | round，默认值为 butt。如果lineCap属性的值设置为butt，则端点将按原模原样绘制出来；如果设置为square，则在端点的基础上再绘制一个矩形，矩形的高度与线条的宽度一致，长度为线条宽度的一半；如果设置为round，则在端点的基础上再绘制一个半圆，半圆的直径等于线条的宽度。在浏览器中，lineCap属性不同取值时的运行效果如图 4‑19 所示：

图4-19 lineCap属性不同取值的线帽效果

说明：

在处理两条线交汇点的间隙时，lineCap属性就非常有用。在线条比较细的时候，影响不明显，在线条比较粗的时候，如果不处理，则两条线的交汇处会形成很大的间隙，特别不美观。

处理两条线交汇点时，常常需要lineJoin和lineCap配合使用，才能处理完美。如果把lineJoin属性设置为'round'，而lineCap属性设置为'butt'，交汇处就会有很大的间隙，影响绘图效果。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

版权声明：本文出自 歪脖网 的《HTML宝典》，欢迎在线阅读，并提出宝贵意见。