html - 网络浏览器中的图像略微模糊。如何禁用它？

Question

我在做游戏。此游戏中的碰撞基于画布上像素的颜色。我得到彩色像素，如果它是红色的，玩家不能移动。不幸的是，在 Firefox 中，图像被远程模糊。像素流畅地从白色变为红色。但我不想那样。 任何想法如何回答这个问题？

Answer 1

这称为抗锯齿，是在调整大小（或子像素化形状、文本等）时对图像进行插值的结果。这是浏览器在内部做的事情。

但是，您可以在更新版本的浏览器中关闭此功能。

这是我做的一个测试，看看这是否适用于您的浏览器以及模式之间的差异（如下图所示） - 底部版本不应该被平滑：

ONLINE TEST

将此片段添加到您的 CSS 样式表中（可能会或可能不会工作，具体取决于浏览器）：

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

更新：标准 的当前形式（状态为“未准备好实施”）指定crisp-edges而不是optimize-contrast可能的未来标准。上面的 CSS 类使用 this 更新，以反映非前缀值的 this。
- 结束更新 -

对于 webkit 浏览器，您可以禁用 canvas 元素的图像平滑，如下所示：

context.webkitImageSmoothingEnabled = false;

对于 Mozilla：

context.mozImageSmoothingEnabled = false;

（如果后者可用，则不需要 CSS 类，除非您缩放元素本身，在任何情况下都应该避免）。