教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

HTML5畫布如何設置線的樣式？

更新時間:2021年03月01日17時52分 來源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育，不一樣的品質


在畫布中，默認線的顏色為黑色，寬度為1像素，但我們可以使用相應的方法為線添加不同的樣式。下面將從寬度、描邊顏色、端點形狀三方面詳細講解線樣式的設置方法。

1. 寬度

使用畫布中的lineWidth屬性可以定義線的寬度，該屬性的取值為數(shù)值（不帶單位），以像素為計量，例如下面的示例代碼，表示設置線的寬度為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所示

線的樣式

猜你喜歡：

前端語義化的好處有哪些?為什么要做前端語義化？

web前端網(wǎng)頁設計的基本原則是什么

六大H5常用結構元素【前端技術文章】

傳智教育web前端工程師培訓課程

0 分享到：
和我們在線交談！