canvas 繪製矩形缺角

admin發表於2018-09-29
Canvas

繪製矩形的方式有多種，具體參閱canvas繪製矩形簡單介紹一章節。

本文介紹一下使用lineTo方法繪製矩形時出現的一個怪異現象。

那就是矩形的一角出現殘缺，程式碼例項如下：

[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("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 10;
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.lineTo(100, 100);

  ctx.strokeStyle = 'rgba(255,0,0)';
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

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

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

很明顯上面矩形的左上側出現了缺角現象。

特別說明：此現象也具有瀏覽器相容問題，當前（2018-9-29），在較新版本谷歌瀏覽器中顯示一切正常，在edge或者火狐等瀏覽器會出現缺角，本文的主要目的是告訴讀者，lineTo方式繪製矩形可能會出現此現象，並鞏固繪製線條所涉及的知識，具體哪些瀏覽器會出現，感興趣的可以自行測試。

一.出現缺角分析如下：

在canvas lineWidth繪製原理一章節介紹了canvas繪製線條的原理。

於是通過lineTo方法繪製四條邊原理上出現如下效果：

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

但是為什麼只有左上角看起來是比較"原生"一點，其他三個角則比較圓滑呢。

這是因為從moveTo方法規定的點開始進行繪製，從第一個點到第五個點繪製是連貫的。

但是第五個點是結束點，不能說第五個點到第一個點之間是連貫的，注意順序。

只能說這兩個點恰好重合，所以左上角就顯得非常"原生"。

那麼只要我們讓它們之間連貫起來就好了，程式碼修改如下：

[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("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 10;
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.lineTo(100, 100);
  ctx.closePath();
  
  ctx.strokeStyle = 'red';
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

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

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

解決方案非常簡單使用closePath方法閉合子路徑即可。

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

相關文章