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

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

线段介绍

Canvas中绘图环境与线段有关的属性：

属性	描述	类型	取值范围	默认值
lineWidth	线段宽度（以像素为单位）	double	非零正数	1.0
lineCap	如何绘制线段端点	DOMString	butt、round、squaer	butt
lineJoin	如何绘制线段连接点	DOMString	round、bevel、miter	bevel
miterLimit	斜接线的长度与二分之一线宽的比值。如果斜接线长度超过该值，则以bevel绘制线段连接点	double	非零正整数	10.0

线段端点

线段端点，是指线段两端的位置，也就是“线帽（line cap）”的样子。如图所示，下面是三种线帽，分别是“不加帽子”、“加个圆帽”、“加个方帽”。

在绘图环境中，控制线段端点的属性正好叫做lineCap，从上到下这三种样式分别对应“butt”、“round”、“square”。

在线演示 详细代码

 线段连接点

绘制线段或矩形时，你可以控制两条线段连接处的那个拐弯，也就是线段连接点（line join）应该怎么画，在绘图环境中，由lineJion属性控制。

从上到下lineJoin这三种属性分别是“round”、“bevel”、“miter”。

在线演示 详细代码

 

• bevel：用一条直线连接两个拐角外部的点
• round：在bevel的基础上补充一条圆弧
• miter（默认）：沿两条线外边缘延长到相交至一个角，受miterLimit属性的影响，超过该值，则以bevel属性替代

线段连接点的具体构建方式

当我们为lineJoin使用miter属性的时候，我们可以指定一个miterLimit属性，它表示斜接线(miter)长度与二分之一宽度的比值，斜接线长度计量方式如图所示。

斜接线长度的计量方式

 

如果斜接线过长，浏览器就会以bevel样式来处理线段连接点