canvas lineWidth 屬性

admin發表於2020-03-17
Canvas

此屬性用於設定將要繪製線條寬度，單位以畫素計。

關於此屬性的深入理解可以參閱canvas lineWidth繪製原理一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.lineWidth = num;

屬性值解析：

（1）.num：規定線條寬度的數字。

特別說明：0、null、Infinity 和 NaN作為屬性值會被忽略。

瀏覽器相容：

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.Safari瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="https://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script>
window.onload = ()=> {
  let c=document.getElementById("ant");
  let ctx=c.getContext("2d");

  ctx.lineWidth=5;
  ctx.rect(20.5,20.5,150,70);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

上述程式碼繪製一個線條寬度為5px的矩形，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/17/005157o1swbultekasammw.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼進行一下簡單說明：

（1）.屬性值必須是一個數字。

（2）.0值不會生效，以1px寬度展示。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  background-color: #ccc;
}  
</style>  
<script>
window.onload = ()=>{
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");

  ctx.lineWidth=5;
  ctx.arc(60, 60, 40, 0, 2 * Math.PI);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

不要認為線條必須是直的，可以使任何形狀，上述程式碼繪製一個圓。

相關文章