Web浏览器中的图像稍微模糊。如何禁用它？

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)
}

<强>更新 current form of the standard（状态为“尚未准备好实施”）指定crisp-edges而非optimize-contrast作为未来可能的标准。上面的CSS类用此更新，以反映未加前缀的值 - 结束更新 -

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

context.webkitImageSmoothingEnabled = false;

和Mozilla：

context.mozImageSmoothingEnabled = false;

（当后者可用时，除非你扩展元素本身，否则不需要CSS类。）