canvas 虛線矩形

admin發表於2018-10-22
原文網址 : https://www.softwhy.com/article-9392-1.html
Canvas

本文介紹一下如何了用canvas繪製一個虛線矩形。

預設情況下繪製的都是實線圖案。

程式碼例項如下：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001042v3nz4n2znby1gr41.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個實線矩形，下面將其修改為虛線矩形。

程式碼例項如下：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001129l5an7zcwzaw78g7a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

繪製了一個虛線矩形，關鍵在於對setLineDash方法的理解。

具體參閱setLineDash() 繪製虛線一章節。

相關文章