要改變線的樣式有以下3種:
lineWidth粗細、lineCap端點、lineJoin尖角、setLineDash虛線

lineWidth 就是調整粗細

ctx.lineWidth = 1; // 預設
ctx.lineWidth = 25;

lineCap 前後端點的樣式

ctx.lineCap = "butt"; // 預設
ctx.lineCap = "round"; // 圓邊
ctx.lineCap = "square"; // 長度與圓邊一樣

round 和 square 前後會多出 (線粗/2) 的長度
square 多出來的長度
在水平、垂直效果和預設的 butt 就只是比較長一些
但用在斜線和水平線交叉時 square 就很好用像下圖

就能補滿 butt 線段不足的問題

像上一張圖的轉角都是預設的尖角
還可以用 lineJoin 改變轉角的樣式

ctx.lineJoin = "miter"; // 預設
ctx.lineJoin = "round";
ctx.lineJoin = "bevel"; // 斜切角

setLineDash 虛線
虛線的參數會重複數值產生 [實線、間隔、實線、間隔、實線 ......] 效果

ctx.setLineDash([20]); // 實線、間隔都是 20 -> [20,20,20,20, ...]
ctx.setLineDash([1,10]);  // 實線 1、間隔 10 ->  [1,10,1,10, ...]

所以 setLineDash([10,20,30]) 時
就會產生 [10,20,30,10,20,30,10,20,30,10, ...] 的虛線