iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

學習 canvas 日記系列 第 7

第 7 天 線的樣式

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

lineWidth 就是調整粗細

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

https://ithelp.ithome.com.tw/upload/images/20181017/20107496AA3vPvOnbL.jpg


lineCap 前後端點的樣式

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

https://ithelp.ithome.com.tw/upload/images/20181017/20107496azYoW2iy4N.jpg
round 和 square 前後會多出 (線粗/2) 的長度
square 多出來的長度
在水平、垂直效果和預設的 butt 就只是比較長一些
但用在斜線和水平線交叉時 square 就很好用像下圖
https://ithelp.ithome.com.tw/upload/images/20181017/20107496JsLHt3Qz2k.jpg
就能補滿 butt 線段不足的問題


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

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

https://ithelp.ithome.com.tw/upload/images/20181017/20107496LZuvBM0YXh.jpg

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

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

https://ithelp.ithome.com.tw/upload/images/20181017/20107496ujXjsFVTuC.jpg
所以 setLineDash([10,20,30]) 時
就會產生 [10,20,30,10,20,30,10,20,30,10, ...] 的虛線
https://ithelp.ithome.com.tw/upload/images/20181017/20107496XybNEfuYKK.jpg


上一篇
第 6 天 畫布置中
下一篇
第 8 天 曲線
系列文
學習 canvas 日記30

尚未有邦友留言

立即登入留言