canvas繪製圖案是重疊繪製而不是重置

admin發表於2018-09-29
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("ant");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.beginPath();
  //目的繪製一條紅色的豎線
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();
  
  //目的繪製一條紅色的豎線
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/161706eu5pw1vnu1g18vi1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼的本意是繪製一條紅色的豎線和藍色的橫線。

結果由於這兩條線都是在同一路徑中，後面設定的藍色會覆蓋前面的紅色。

從表現結果來看，下面這個結論無懈可擊：

[HTML] 純文字檢視 複製程式碼
在同一個路徑中，設定的屬性會作用於整個路徑，後面的會覆蓋前面的

比如後面設定的strokeStyle屬性值會覆蓋前面設定的strokeStyle屬性值。

這是一種視覺上的誤導，實質上並不是如此，再來看一段程式碼例項：

[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.lineWidth = 6;
  ctx.beginPath();
  //目的繪製一條紅色的豎線
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();

  //目的繪製一條紅色的豎線
  ctx.lineWidth = 2;
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/161753fsicmmciqogqbumi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

怎麼回事，難道後面的lineWidth屬性沒有覆蓋前面的lineWidth屬性嗎。

其實canvas中的繪製是這樣的，當圖片繪製完成之後，它就是一個事實的存在（當然也可以使用對應方法清除，比如利用clearRect方法，但不在本文考慮範圍之內），後面同一路徑中，會根據新設定的相關屬性重新繪製一次，這裡注意了，它不會是清除也不是重置之前繪製的圖案，而是將新繪製的圖案覆蓋在原來圖案的上面，由此就出現了上面的繪製效果。

相關文章