首頁技術文章正文

Canvas怎樣修改線條的寬度、顏色和形狀？

更新時間:2023年08月30日18時19分來源:傳智教育瀏覽次數(shù):

在Canvas中，線的默認顏色為黑色，寬度為lpx，但我們可以使用相關屬性為線添加不同的樣式。下面我們將從寬度、描邊顏色、端點形狀3方面詳細講解線條樣式的設置方法。

1.設置線條寬度

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

context.lineNidth='10';

上述代碼中設置了線的寬度為10。

2.設置描邊顏色

使用strokeStyle屬性可以定義線的描邊顏色，該屬性的取值為十六進制顏色值或顏色的英文名。設置描邊顏色的示例代碼如下：

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

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

3.設置端點形狀

默認情況下，線的端點是方形的，通過lineCap屬性可以改變端點的形狀，示例代碼如下：

context.1ineCap=，屬性值'；

lineCap屬性的取值有3個，具體如表所示。

lineCap屬性的取值

1693389996478_屬性取值.png

了解了設置線的樣式的基本方法后，下面演示如何為線設置樣式。

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

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

上述代碼中，第15行代碼設置了線的寬度為10像素：第16行代碼設置了線的顏色為紅色;第17行代碼設置了線的端點為圓形。

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

1693390529222_線的寬度.png