首頁(yè)技術(shù)文章正文

HTML5畫(huà)布如何設(shè)置線的樣式？

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

在畫(huà)布中，默認(rèn)線的顏色為黑色，寬度為1像素，但我們可以使用相應(yīng)的方法為線添加不同的樣式。下面將從寬度、描邊顏色、端點(diǎn)形狀三方面詳細(xì)講解線樣式的設(shè)置方法。

1. 寬度

使用畫(huà)布中的lineWidth屬性可以定義線的寬度，該屬性的取值為數(shù)值（不帶單位），以像素為計(jì)量，例如下面的示例代碼，表示設(shè)置線的寬度為10像素。

context.lineWidth='10';

2. 描邊顏色

使用畫(huà)布中的strokeStyle屬性可以定義線的描邊顏色，該屬性的取值為十六進(jìn)制顏色值或顏色英文，例如下面的示例代碼。

  context.strokeStyle='#f00';

  context.strokeStyle='red';

在上面的示例代碼中，兩種方式都可以用于設(shè)置紅色，顯示效果相同。

3. 端點(diǎn)形狀

默認(rèn)情況下，線的端點(diǎn)是方形的，通過(guò)畫(huà)布中的lineCap屬性可以改變端點(diǎn)的形狀，其基本語(yǔ)法格式如下。

lineCap=’屬性值’

在上面的語(yǔ)法格式中，lineCap屬性的取值有3個(gè)，具體如表1所示。

表1 lineCap屬性值

表1所示屬性值對(duì)應(yīng)的效果如圖1所示

線的樣式

猜你喜歡：

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

最新資訊