图文、示例【绘制】HTML5 Canvas线段端点和连接点的绘制 _线段

【绘制】HTML5 线段端点和连接点的绘制（图文、示例）
/10/2 19:09:45
我的处女作《系列教程》在我的上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
教程介绍、教程目录等能在里查阅。
传送门：
线段介绍
中绘图环境与线段有关的属性：
属性描述类型取值范围默认值
线段宽度（以像素为单位）
非零正数
1.0
如何绘制线段端点
butt、round、
butt
如何绘制线段连接点
round、bevel、miter
bevel
斜接线的长度与二分之一线宽的比值。如果斜接线长度超过该值，则以bevel绘制线段连接点
非零正整数
10.0
【图文、示例【绘制】HTML5 Canvas线段端点和连接点的绘制】线段端点
线段端点，是指线段两端的位置，也就是“线帽（line cap）”的样子。如图所示，下面是三种线帽，分别是“不加帽子”、“加个圆帽”、“加个方帽” 。

文章插图
在绘图环境中，控制线段端点的属性正好叫做，从上到下这三种样式分别对应“butt”、“round”、“” 。
在线演示详细代码
线段连接点
绘制线段或矩形时，你可以控制两条线段连接处的那个拐弯，也就是线段连接点（line join）应该怎么画，在绘图环境中，由属性控制。
从上到下这三种属性分别是“round”、“bevel”、“miter” 。
在线演示详细代码
线段连接点的具体构建方式
当我们为使用miter属性的时候，我们可以指定一个属性，它表示斜接线(miter)长度与二分之一宽度的比值，斜接线长度计量方式如图所示。
斜接线长度的计量方式
如果斜接线过长，浏览器就会以bevel样式来处理线段连接点

图文、示例 【绘制】HTML5 Canvas线段端点和连接点的绘制

图文、示例【绘制】HTML5 Canvas线段端点和连接点的绘制