1

当我在画布上绘制时，我设置imageSmoothingEnabled了我的绘图上下文以获得清晰的像素渲染，但由于某种原因，图像变得模糊。false下面的示例设置了一个填充黑色的 20x20 画布，并绘制了一条红色的像素对角线，并imageSmoothingEnabled设置为false穿过它。它在 Chrome、FF 和 Edge 中仍然模糊不清。

谁能告诉我为什么这不起作用以及如何解决？

HTML：

<canvas></canvas>

JS：

var context = document.querySelector('canvas').getContext('2d');

context.canvas.height = context.canvas.width = 20;

context.fillStyle = "#000000";
context.fillRect(0, 0, 20, 20);

context.imageSmoothingEnabled = false;
context.fillStyle = "#ff0000";

for (var i = 0; i < 20; i ++) {

  context.fillRect(i, i, 1, 1);

}

我设置了以下小提琴来展示我的问题：

https://jsfiddle.net/ct39rqpf/7/

注意：在小提琴中，您可以将 CSS 设置image-rendering:pixelated为画布，它将显示我试图通过imageSmoothingEnabledset to获得的内容false。

编辑：我发现imageSmoothingEnabled这只适用于缩放图像，我没有这样做。我不明白的是，当我image-rendering:pixelated在 CSS 中应用时，我得到的图像比简单地将像素绘制到未缩放的画布上要清晰得多。为什么默认会有模糊？

4

0 回答 0