在Canvas中，線段也是路徑中的一種，被稱之為線性路徑。在Canvas中繪制線性路徑主要用到moveTo(x,y)、lineTo(x,y)和stroke()幾個(gè)方法，讓我們來回憶下線寬的用法。

function drawLine(){      cxt.lineWidth = 3;      cxt.moveTo(10, 10);      cxt.lineTo(120, 100);      cxt.stroke();  }

上面的代碼我們就可以繪制一條寬度為3像素的線段。

上一章我們還提到線寬與像素邊界的內(nèi)容主要為：
如果你在某2個(gè)像素的邊界處繪制一條1像素寬的線段，那么該線段實(shí)際會占據(jù)2個(gè)像素的寬度；

因?yàn)楫?dāng)你在像素邊界處繪制一條1像素寬度的垂直線段時(shí)，canvas的繪圖環(huán)境對象會試著將半個(gè)像素畫在邊界中線的右邊，將另外半個(gè)像素畫在邊界中線的左邊。

然而，在一個(gè)整像素的范圍內(nèi)繪制半個(gè)像素寬的線段是不可能的，所以在左右兩個(gè)方向上的半個(gè)像素都被擴(kuò)展為1個(gè)像素。（具體內(nèi)容可參考第三章內(nèi)容）；

今天這章內(nèi)容我們用來看看線段的其它屬性 lineCap，lineJoin。

線段的端點(diǎn)（lineCap）

在繪制線段時(shí)，你可以控制線段的端點(diǎn)，也就是 “線帽” （lineCap）的樣子，在Canvas的繪圖環(huán)境對象中，控制線段端點(diǎn)的屬性正好也叫作lineCap。
線段端點(diǎn)的樣式有三個(gè)值，分別是butt, roundm, square， 默認(rèn)是為butt； round與square 都會給線段的端點(diǎn)畫上一頂帽子。

• butt：線段端點(diǎn)的默認(rèn)樣式

• round：在端點(diǎn)處添加一個(gè)半圓，其半徑是線寬的一半。

• square: 在端點(diǎn)處添加一個(gè)矩形，長度與線寬一致，寬度是線寬的一半。

看到這里貌似我們也看不出什么名堂。那我們就先繪制出來，你就會瞬間明白了。要不怎么都說要數(shù)據(jù)可視化呢！

function lineCap(){      cxt.lineWidth = 20;      cxt.strokeStyle = '#16a085';        cxt.beginPath();      cxt.lineCap = 'butt';      cxt.moveTo(20, 20);      cxt.lineTo(300, 20);      cxt.stroke();        cxt.beginPath();      cxt.lineCap = 'round';      cxt.moveTo(20, 100);      cxt.lineTo(300, 100);      cxt.stroke();        cxt.beginPath();      cxt.lineCap = 'square';      cxt.moveTo(20, 180);      cxt.lineTo(300, 180);      cxt.stroke();  }

看到上面的圖片是不是瞬間就知道了lineCap的屬性值的樣式，是不是也感受到了可視化的魅力。

線段的連接點(diǎn)（lineJoin）

在繪制線段或者矩形時(shí)，我們可以控制兩條線段連接處的拐點(diǎn)，也就是線段的連接點(diǎn)。
在canvas繪圖環(huán)境中線段的連接點(diǎn)是由 lineJoin屬性控制的。
lineJoin屬性也有三個(gè)值分別為： round, bevel, miter，默認(rèn)是miter。

• round：額外填充一個(gè)圓弧，圓弧為兩條線段拐角的外邊緣的點(diǎn)用圓弧連接而成，

• bevel：額外填充一個(gè)三角形，三角形為兩條線段拐角的外邊緣的點(diǎn)用直線連接而成。

• miter：額外填充一個(gè)多邊形，多邊形為兩條線段拐角外邊緣的延長線的交點(diǎn)形成。

同樣我們繪制出來看一下

function lineCap(){      cxt.lineWidth = 20;      cxt.strokeStyle = '#16a085';        cxt.beginPath();      cxt.lineJoin = 'round';      cxt.moveTo(20, 20);      cxt.lineTo(300, 20);      cxt.lineTo(300, 60);      cxt.stroke();        cxt.beginPath();      cxt.lineJoin = 'bevel';      cxt.moveTo(20, 100);      cxt.lineTo(300, 100);      cxt.lineTo(300, 140);      cxt.stroke();        cxt.beginPath();      cxt.lineJoin = 'miter';      cxt.moveTo(20, 180);      cxt.lineTo(300, 180);      cxt.lineTo(300, 220);      cxt.stroke();  }

我們再來看看線段連接點(diǎn)的具體構(gòu)建方式

提示

當(dāng)我們使用miter樣式來繪制線段的連接點(diǎn)時(shí)，我們還可以指定一個(gè)miterLimit屬性
miterLimit: 表示斜接線（miter）的長度與二分之一線寬的比值；

斜接線的計(jì)量方式如下圖

從圖中我們可以看出，如果兩個(gè)線段的夾角很小的話，那么斜接線的長度有可能會變的非常長，它與二分之一線寬的比值就會超出你所指定的miterLimit的屬性值，

這時(shí)候?yàn)g覽器會將以bevel的方式來繪制線段的連接點(diǎn)。

總結(jié)

Canvas繪圖環(huán)境中線段的相關(guān)屬性