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

admin發表於2018-08-17
Canvas

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

不但在視覺上模糊且寬度明顯大於1px。

下面就介紹一下出現此問題的原因。

先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var 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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script type="text/javascript">
window.onload = function () {
  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>

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

相關文章