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

Canvas怎樣設(shè)置和調(diào)整線條樣式?

更新時(shí)間:2023-10-27 來(lái)源:黑馬程序員 瀏覽量:

在Canvas中,線的默認(rèn)顏色為黑色,寬度為lpx,但我們可以使用相關(guān)屬性為線添加不同的樣式。下面我們將從寬度、描邊顏色、端點(diǎn)形狀3方面詳細(xì)講解線條樣式的設(shè)置方法。

1.設(shè)置線條寬度

使用lineWidth屬性可以定義線的寬度,該屬性的取值為數(shù)值(不帶單位),以像素為計(jì)量。設(shè)置線的寬度的示例代碼如下:

context.lineNidth='10';

上述代碼中設(shè)置了線的寬度為10。

2.設(shè)置描邊顏色

使用strokeStyle屬性可以定義線的描邊顏色,該屬性的取值為十六進(jìn)制顏色值或顏色的英文名。設(shè)置描邊顏色的示例代碼如下:

context.strokeStyle='4f00';
context.strokeStyle='red';

在上述代碼中,兩種方式都可以用于設(shè)置線的描邊顏色為紅色。

3.設(shè)置端點(diǎn)形狀

默認(rèn)情況下,線的端點(diǎn)是方形的,通過lineCap屬性可以改變端點(diǎn)的形狀,示例代碼如下:

context.1ineCap=,屬性值';

lineCap屬性的取值有3個(gè),具體如表所示。

lineCap屬性的取值

1693389996478_屬性取值.png

了解了設(shè)置線的樣式的基本方法后,下面演示如何為線設(shè)置樣式。

(1)創(chuàng)建C:icodekchapter02\demol3.html,創(chuàng)建畫布并為線設(shè)置寬度、顏色和端點(diǎn)形狀,具體代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas id="cas" width="300" height="300">
     您的測(cè)覽器不支持Canvas標(biāo)簽
  </canvas>
  <script>
   var context=document.getElementById('cas').getContext('2d');
   context.moveTo(10,10);          // 定義初始位置
   context.1ineTo(300,10);         // 定義連線端點(diǎn)
   context.lineWidth='10';         // 設(shè)置線的寬度
   context.strokeStyle='red';      // 設(shè)置線的顏色
   context.lineCap='round';        // 設(shè)置線的端點(diǎn)形狀
   context.stroke();               // 定叉描邊
  </script>
</body>
</html>

上述代碼中,第15行代碼設(shè)置了線的寬度為10像素:第16行代碼設(shè)置了線的顏色為紅色;第17行代碼設(shè)置了線的端點(diǎn)為圓形。

(2)保存代碼,在瀏覽器中測(cè)試,頁(yè)面效果如圖所示。

1693390529222_線的寬度.png

設(shè)置線的寬度、顏色和端點(diǎn)形狀

頁(yè)面顯示一條紅色的線,說(shuō)明我們已經(jīng)成功為線設(shè)置了樣式。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!