更新時間:2021-03-01 來源:黑馬程序員 瀏覽量:
在畫布中,默認線的顏色為黑色,寬度為1像素,但我們可以使用相應的方法為線添加不同的樣式。下面將從寬度、描邊顏色、端點形狀三方面詳細講解線樣式的設置方法。
1. 寬度
使用畫布中的lineWidth屬性可以定義線的寬度,該屬性的取值為數值(不帶單位),以像素為計量,例如下面的示例代碼,表示設置線的寬度為10像素。
context.lineWidth='10';
2. 描邊顏色
使用畫布中的strokeStyle屬性可以定義線的描邊顏色,該屬性的取值為十六進制顏色值或顏色英文,例如下面的示例代碼。
context.strokeStyle='#f00'; context.strokeStyle='red';
在上面的示例代碼中,兩種方式都可以用于設置紅色,顯示效果相同。
3. 端點形狀
默認情況下,線的端點是方形的,通過畫布中的lineCap屬性可以改變端點的形狀,其基本語法格式如下。
lineCap=’屬性值’
在上面的語法格式中,lineCap屬性的取值有3個,具體如表1所示。
屬性值 | 顯示效果 |
---|---|
butt(默認值) | 默認效果,無端點,顯示直線方形邊緣。 |
round | 顯示圓形端點。 |
square | 顯示方形端點。 |
表1 lineCap屬性值
表1所示屬性值對應的效果如圖1所示
猜你喜歡: