在绘制线段一文中，了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段，但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。

Canvas中的线型主要包括 线宽 、 线段端点 和 线段连接点 三个部分。那么咱们先来了解线宽。

线宽

通过前面的示例，我们不难发现，在Canvas中通过 lineWidth 属性来定义线段的粗细。我们可以给其明确指定一个 value 值，在没有显式设置 lineWidth 的值时，为以默认值 1 来确定线段的粗细。

那什么叫线宽呢？在Canvas中，线宽是指给定路径的中心到两边的粗细。换句话说就是 在路径的两边各绘制线宽的一半 。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

想要获得精确的线条，必须对线条是如何绘制出来的有所理解。比如下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在左侧图中，填充了 (2,1) 至 5,5 的矩形，整个区域的边界刚好落在像素边缘上，这样得到的矩形有着清晰的边缘。如果你想要绘制一条从 (3,1) 至 (3,5) ，宽度是 1.0 的线条，就会得到下图中间图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素，而这半个像素以会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。要解决这个问题，必须对路径施予更加精确的控制。已经知道 1.0 的线条会在路径两边各延伸 0.5 个像素，那么像下图最右侧的那样绘制的线条（从 (3.5,1) 至 (3.5，5) ），其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。

特别注意，在Canvas中绘制 1 个像素的线条时，坐标位置需要错开 0.5 个像素。

另外在Canvas中绘制路径（线段）时，后面显式设置的 lineWidth 会覆盖前面的值。比如：

function drawScreen () { ctx.strokeStyle = "red"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(30,30); ctx.lineTo(300,30); ctx.stroke(); ctx.lineWidth = 40; ctx.beginPath(); ctx.moveTo(30,60); ctx.lineTo(300,60); ctx.stroke(); }

线段端点

在绘制线段时，可以控制线段端点，这个线段端点也称为 线帽 。在Canvas的绘图环境中，控制线段端点绘制有一个属性叫 CanvasRenderingContext2D.lineCap 。

CanvasRenderingContext2D.lineCap 有三个值： butt 、 round 和 square ，其中默认的值是 butt 。

butt ：线段末端以方形结束 round ：线段末端以圆形结束 square ：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

来看一个小示例：

ctx.lineWidth = 30; ctx.beginPath(); ctx.lineCap = 'butt'; ctx.moveTo(30,30); ctx.lineTo(400,30); ctx.fillText('butt', 410, 40); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.moveTo(30,100); ctx.lineTo(400,100); ctx.fillText('round', 430, 110); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'square'; ctx.moveTo(30,180); ctx.lineTo(400,180); ctx.fillText('square', 430, 190); ctx.stroke();

上图中，两条蓝色线突出的部分就是在Canvas中所谓的线帽，也就是线段端点。

你可以通过下面的示例，选择表单对应的值，能看到 lineCap 的效果：

线段连接点

在Canvas中绘制路径（线段），它总有可能会有相连的部分，比如说绘制的一个矩形。那么每两条线段相交的点就是 线段的连接点 。那么在Canvas中怎么控制线段连接点效果呢？在Canvas中，可以通过 CanvasRenderingContext2D.lineJoin 来控制。

CanvasRenderingContext2D.lineJoin 同样有三个值： round 、 bevel 和 miter ，其中 miter 是其默认值。

round ：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度 bevel ：在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角 miter ：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果

来看一个小示例：

function drawScreen () { ctx.font = "24px Arial"; ctx.strokeStyle = "#f9f"; ctx.lineWidth = 30; ctx.beginPath(); ctx.lineJoin = 'miter'; ctx.moveTo(30,50); ctx.lineTo(120,50); ctx.lineTo(120,280); ctx.fillText('miter', 40, 20); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = 'round'; ctx.moveTo(180,50); ctx.lineTo(280,50); ctx.lineTo(280,280); ctx.fillText('round', 200, 20); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = 'bevel'; ctx.moveTo(350,50); ctx.lineTo(450,50); ctx.lineTo(450,280); ctx.fillText('bevel', 370, 20); ctx.stroke(); }

lineJoin 相对于 lineCap 要更为复杂一点点。咱们来看下面这张图：

先来看 bevel 值，两条线段相交的时候，将会用一条直线来连接两个拐角外部的点，使之构成一个三角形。 miter 的效果和 bevel 有点类似，只是它还会再画一个三角形，使两个线段的接合处变为一个矩形。而 round 会使两个线段的拐角处就会画上一段填充好的圆弧。

来看一个动态示例：