网络浏览器中的图像有点模糊。如何解决呢? [英] Images in web browser are blurred a bit. How to fix it?
问题描述
我在玩游戏。这个游戏中的碰撞是基于画布上的像素的颜色。我得到彩色像素,如果它是例如红色,玩家不能移动。
不幸的是在firefox图像远程模糊。像素流利地从白色变为红色。但我不想要。
任何想法如何回答这个问题?
这被称为抗锯齿,是重新调整大小(或子像素化形状,文本等)时对图像进行插值的结果向前)。
不过,您可以在浏览器的最新版本中关闭此功能。
这是我做的一个测试,看看这是否在您的浏览器和模式之间的差异(如下图) - 底部版本不应该平滑:
(含状态未准备好实施)指定 crisp-edges
而不是 optimize-contrast
作为未来的标准。上面的CSS类更新为以反映这个非前缀值。
- 结束更新
对于webkit浏览器,您可以像这样禁用canvas元素的图像平滑:
context.webkitImageSmoothingEnabled = false;
和Mozilla:
context.mozImageSmoothingEnabled = false;
(当后者可用时,CSS类不是必需的,除非您缩放元素本身,应避免这种情况)。
I'm making a game. Collisions in this game are based on color of pixel on canvas. I get color pixel and if it is for example red, player can't move. Unfortunately in firefox images are remotely blurred. Pixels are fluently changed from white color to red. But I don't want that. Any ideas how to answer to this problem?
This is called anti-aliasing and is a result of interpolating the image when re-sized (or sub-pixeling shapes, text and so forth). It's something the browser do internally.
You can however turn off this in more recent version of the browser.
Here is a test I made to see if this works in your browser and the difference between the modes (as in the picture below) - the bottom version should not be smoothed:
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).
这篇关于网络浏览器中的图像有点模糊。如何解决呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!