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

问题描述

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

任何想法如何回答这个问题？

解决方案

这被称为抗锯齿，是重新调整大小后的图像插值结果（或子像素形状，文本等等向前）。这是浏览器在内部执行的操作。

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

这是我做了一个测试，看看它是否在浏览器中工作，以及模式之间的差异（如下图） - 底部版本不应平滑：

Add this snippet to your CSS style sheet (may or may not work depending on browser):

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

Update:The current form of the standard (with status "not ready for implementation") specify crisp-edges and not optimize-contrast as possible future standard. CSS class above is updated with this to reflect this for the non-prefixed value.
- end update -

For webkit browsers you can disable image smoothing for the canvas element like this:

context.webkitImageSmoothingEnabled = false;

and for Mozilla:

context.mozImageSmoothingEnabled = false;

(when this latter is available the CSS class is not necessary unless you scale the element itself which in any case should be avoided).

这篇关于网络浏览器中的图像稍微模糊。如何禁用它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！