canvas路徑與子路徑詳解

admin發表於2018-09-27
Canvas

路徑在canvas是一個十分重要的概念，但往往會被初學者忽略。

如果對它沒有良好的掌握，非常容易出現意想不到的問題。

首先看一段程式碼例項：

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

程式碼目的是繪製一條直線，然而執行程式碼之後，發現頁面什麼都沒有。

這是因為moveTo與lineTo方法繪製了一條路徑，但是路徑還沒有進行描邊操作。

程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.stroke();
}

呼叫stroke方法進行描邊即可繪製出相應的直線。

上述程式碼展示的是初學者容易犯的一個錯誤，通過此例子引出本文主角，路徑。

一.路徑與子路徑：

路徑本身是很容易理解的，與PS中的路徑如出一轍。

通俗點說，路徑勾勒出影像的輪廓，然後對路徑進行描邊和填充，使其顯示出來。

canvas路徑特點如下：

在繪圖的任何時刻，只有一條路徑存在，此路徑可以擁有多個子路徑。

路徑由beginPath方法建立，子路徑可以利用canvas中的lineTo,或者arcTo等方法建立。

將描邊顏色設定為紅色，那麼此路徑中繪製的圖案的描邊顏色都是紅色，在此路徑中再繪製一條線，並將其描邊顏色設定為藍色，那麼整個路徑所有圖案描邊都會變成藍色，包括前面已經繪製的紅色線，本質是重新對整個路徑進行一次描邊，藍色描邊將紅色描邊覆蓋在下面（紅色描邊依然存在，不要理解為重置）。

更多內容可以參閱canvas繪製圖案是重疊繪製而不是重置一章節加深理解。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<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.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  
  ctx.moveTo(50,200);
  ctx.lineTo(80,220);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

程式碼在一個路徑中繪製兩個子路徑，moveTo方法用來設定子路徑的起點位置。

關於moveTo方法的更多內容參閱canvas moveTo()一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();

  ctx.strokeStyle = "blue";
  ctx.lineTo(200, 80);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/27/234736u8rstaxd4xp41yix.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

會在當前路徑中重新再"塗抹"一遍描邊顏色，豎線的紅色描邊會被藍色覆蓋。

為了避免上述情況，beginPath方法的作用就得以體現。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(100, 80);
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

上述程式碼實現了預期效果，豎線和橫線具有不同的顏色。

這是因為使用beginPath方法可以開闢一條新的路徑，在新路徑上繪製的圖案會不對前面繪製的圖案產生影響。

更多關於路徑的更多知識可以參閱canvas beginPath()詳解一章節。

相關文章