canvas 1px 畫素模糊現象解決方案

admin發表於2018-08-17
Canvas

當繪製寬度1px的線條時，可能真正繪製出來的線條並不是1px。

不但在視覺上模糊且寬度明顯大於1px，下面介紹一下出現此問題的原因。

先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = ()=> {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 250);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas" width="550" height="450"></canvas>
</body>
</html>

預設，線條的寬度是1px，很明顯上面的寬度不是1px，並且還是模糊。

如果放大canvas畫布，可以認為畫布是由一個一個的畫素組成。

模擬如下圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/143343l6rr6pvivp31vfnx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果從x軸座標1點繪製一個寬度為1px的線條，我們可能認為將繪製出如下圖案：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/143352x5fkfsfblvvxblbe.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然而事實並非如此，canvas繪製的線條會從路徑的中央向兩端擴充套件。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/143359a8jz817cyxc71l8s.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

但計算機並不會僅繪製0-1和1-2的半個畫素，而將繪製0-1和1-2的整個畫素，那麼加起來就是2px。

那麼為何會模糊呢，這是因為0-0.5和1.5-2之間的內容會被更淺顏色的內容填充，所以看到模糊效果。

更多內容參閱canvas 繪製線條 lineWidth 寬度原理一章節。

既然明確導致這個現象的原因，解決方案也就很容得出。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = ()=> {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.moveTo(50.5, 50);
  ctx.lineTo(50.5, 250);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas" width="550" height="450"></canvas>
</body>
</html>

設定繪製路徑起點從一個畫素的中心開始，那麼當向兩端擴充套件的時候，恰好填滿一個畫素。

相關文章