canvas 繪製線條

admin發表於2020-03-13
Canvas

canvas 有繪製複雜圖案能力，再複雜的圖案也是有簡單的元素構成。

本文通過程式碼例項介紹一下如何繪製一條簡單的線條。

程式碼例項如下：

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

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(50, 80);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="180" height="100"></canvas>
</body>
</html>

上述程式碼可以繪製一條斜線，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/13/165438b3h44ama0dg40pm9.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下詳細分析：

[JavaScript] 純文字檢視 複製程式碼
let canvas = document.getElementById("ant");
let ctx = canvas.getContext("2d");

通過document.getElementById("ant")獲取<canvas>元素物件，也就是獲取畫布。

再利用<canvas>元素物件的getContext()方法獲取繪圖環境，具體參閱canvas getContext()一章節。

[JavaScript] 純文字檢視 複製程式碼
ctx.beginPath()

利用beginPath()方法可以建立一條新路徑，具體參閱canvas beginPath()一章節。

[JavaScript] 純文字檢視 複製程式碼
ctx.moveTo(10, 10);
ctx.lineTo(50, 80);

moveTo()方法的引數是一個座標，也就是將起始畫筆筆觸置於何處。

lineTo()方法的引數也是一個座標，規定直線末端座標。

將起始筆觸點與直線的末端座標連線起來，就形成了一條直線。

[JavaScript] 純文字檢視 複製程式碼
ctx.stroke();

如果不呼叫stroke()方法，則畫布上看不到任何圖案。

因為moveTo()和lineTo()方法只是勾勒出了繪圖的路徑，還需要stroke()描邊操作。

建議參閱如下幾篇文章：

（1）.canvas 路徑與子路徑一章節。

（2）.canvas beginPath()一章節。

相關文章