Canvas 4 線形 line style

這篇主要介紹通過一系列屬性來設置線的樣式

主要包括以下屬性：

lineWidth = value

• 設定當前線條的粗細（默認爲1.0）
• 這裏需要注意一個問題，在繪製線條的時候，給定的線寬，實質上值得是給定路徑的中心到兩邊的粗細，通俗的講就是，路徑的兩邊各繪製線寬的一半。
• 同時畫布的座標並不和像素直接對應，當需要精確的水平或者垂直線的時候需要注意。
• 下面範例中，奇數的線畫的都比較模糊不清，不能精確呈現，這是路徑定位問題。

範例１：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}
draw();

這裏進一步討論一下上述提及的問題，爲什麼奇數的線條繪製會出現模糊不清的原因。首先要先明確一個問題，canvas的座標系統跟pixel不是一一對應的。如下圖所示，網格中一格表示的是一個pixel，如果 fillRect（2,1,3,4），剛好完整的覆蓋一個12格的矩形。

如果使用者想畫一條線，那這個線經過,這個線經過３，１，到３，５。寬度爲１，那麼這個線會是怎麼樣的呢？

從上圖我們就能觀察到，深藍色使我們實際需要的那個寬度爲1的線，可是pixel並不能一半上色一半不上色，那麼在實際過程中你會得到的是用一半的顏色填充那一半不需要上色的pixel，就會得到奇數寬度不準確的原因了。

要解決這個問題，必須對路徑進行精確的控制，讓邊緣剛好落在像素邊界。

修改一下code，這樣看起來是不是清晰多了。左邊是修改後的，右邊是沒有修改的

lineCap = type

設定線條末端樣式,有下圖中三種，分別是 butt，round，square，默認是 butt。圖中藍色的線是起終點的輔助線。

• round就是在起終點都加上一個直徑爲線寬的半圓。
• square就是在起終點加上一個高度爲線寬一半的方塊。

lineJoin = type

設定線條與線條間接合處樣式,同樣有三種，下圖中依序是 round，bevel，miter，默認是miter。miter會受到miterLimit的限制。miterLimit = value