canvas closePath()

admin發表於2018-09-28
Canvas

看到此方法會不會聯想到beginPath方法，並對它們之間的關係產生一些猜想。

程式語言中，很多語法結構是相互照應的，比如endsWith方法與startsWith方法。

既然beginPath方法可以建立一個新的路徑，那麼closePath方法是不是用來結束一個路徑。

答案是否則定的，closePath幾乎與beginPath方法沒有任何關聯。

關於beginPath方法的使用可以參閱canvas beginPath()一章節。

closePath方法的功能並不是結束一個路徑，而是閉合一個子路徑。

它可以將子路徑的終點與起點連線起來。

程式碼例項如下：

[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.lineTo(100,120);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/28/232906m1xuhc0b012gx243.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到路徑的起點位置與終點位置並沒有閉合。

程式碼修改如下：

[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.lineTo(100,120);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/28/232928r5jcaetxzjc6echd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到路徑的終點位置和起點位置被一條線連線起來。

這就是closePath方法的作用，用來閉合一個路徑。

[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.stroke();

  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.moveTo(30,120);
  ctx.lineTo(100,120);
  ctx.lineTo(140,190);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/28/232955j2smmp3ismxxxist.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第一段程式碼中，位置一與位置二連線起來，但是上面的程式碼是位置三與位置四連線起來。

這是因為closePath方法閉合當前路徑的起始位置與結束位置，上面程式碼中，closePath方法位於新建立的路徑中，與前面已經繪製完畢的圖案沒有任何關係，這需要對路徑概念有所瞭解，具體參閱下面兩篇文章。

（1）.路徑可以參閱canvas 路徑與子路徑一章節。

（2）.beginPath可以參閱canvas beginPath()一章節。

相關文章