画布绘制图像不模糊 - JavaScript

在使用 JavaScript 的 Canvas 绘制图像时，经常会出现模糊的情况。这是因为 Canvas 的像素单位是整数，而图像缩放后有可能不是整数倍，导致出现模糊。

下面介绍一些方法来解决这个问题。

方法一：高清 Canvas

使用 window.devicePixelRatio 属性可以获取设备的像素比例，从而创建更高分辨率的 Canvas。

例如，如果设备像素比例为 2，则可以这样创建高清 Canvas：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

const devicePixelRatio = window.devicePixelRatio || 1;
const backingStoreRatio = context.webkitBackingStorePixelRatio ||
                          context.mozBackingStorePixelRatio ||
                          context.msBackingStorePixelRatio ||
                          context.oBackingStorePixelRatio ||
                          context.backingStorePixelRatio || 1;
const ratio = devicePixelRatio / backingStoreRatio;

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.style.width = canvas.offsetWidth + 'px';
canvas.style.height = canvas.offsetHeight + 'px';

context.scale(ratio, ratio);

这样可以提高图像的清晰度。

方法二：禁用图像平滑

在绘制图像前，可以禁用图像平滑。这样会使图像变得锐利，但可能会出现锯齿状的边缘。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.imageSmoothingEnabled = false;

方法三：使用 CSS 缩放

可以使用 CSS 缩放来避免 Canvas 的像素缩放问题。将 Canvas 的实际大小设置为图像所需的大小，然后使用 CSS 缩放来缩小 Canvas。

例如，如果要在 Canvas 中绘制一个 200x200 的图像，可以这样设置 Canvas：

<canvas id="myCanvas" width="200" height="200"></canvas>

然后使用 CSS 缩放来缩小 Canvas：

#myCanvas {
  width: 100px;
  height: 100px;
  transform: scale(0.5);
}

这样可以避免 Canvas 的像素缩放问题，并且可以更好地控制图像的大小。

以上是几种解决 Canvas 绘制图像模糊的方法，可以根据实际情况选择使用。