问题描述
注意：这与现有的canvas元素在放大时，不关于如何将线条或图形呈现到画布表面上 。换句话说，这与缩放元素的插值有关，与在画布上绘制的图形的抗锯齿无关。我不关心浏览器如何绘制线条;我关心浏览器在放大时如何绘制canvas元素本身。
是否有canvas属性或浏览器设置，当缩放< canvas> 元素时，我可以通过编程方式更改禁用插值？跨浏览器解决方案是理想的，但不是必需的;基于Webkit的浏览器是我的主要目标。效果非常重要。
做我想要的：
规范概述了三个接受值： auto ， crisp-edges 和 pixelated 。
当向上缩放图像时，必须使用最近邻或类似算法，以使图像看上去仅由非常大的像素组成。缩小时，这与自动相同。
标准？跨浏览器？
由于这只是一个工作草稿，因此无法保证这将成为标准。
Mozilla开发人员网络拥有
NOTE: This has to do with how existing canvas elements are rendered when scaled up, not to do with how lines or graphics are rendered onto a canvas surface. In other words, this has everything to do with interpolation of scaled elements, and nothing to do with antialiasing of graphics being drawn on a canvas. I'm not concerned with how the browser draws lines; I care about how the browser renders the canvas element itself when it is scaled up.
Is there a canvas property or browser setting I can change programmatically to disable interpolation when scaling <canvas> elements? A cross-browser solution is ideal but not essential; Webkit-based browsers are my main target. Performance is very important.
This question is most similar but does not illustrate the problem sufficiently. For what it's worth, I have tried image-rendering: -webkit-optimize-contrast to no avail.
The application will be a "retro" 8-bit styled game written in HTML5+JS to make it clear what I need.
To illustrate, here is an example. (live version)
Suppose I have a 21x21 canvas...
<canvas id='b' width='21' height='21'></canvas>
...which has css that makes the element 5 times larger (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
I draw a simple 'X' on the canvas like so:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
The image on the left is what Chromium (14.0) renders. The image on the right is what I want (hand-drawn for illustrative purposes).
Last Updated: 2014-09-12
The answer is maybe some day. For now, you'll have to resort to hack-arounds to get what you want.
image-rendering
The working draft of CSS3 outlines a new property, image-rendering that should do what I want:
The specification outlines three accepted values: auto, crisp-edges, and pixelated.
Standard? Cross-browser?
Since this is merely a working draft, there's no guarantee that this will become standard. Browser support is currently spotty, at best.
The Mozilla Developer Network has a pretty thorough page dedicated to the current state of the art which I highly recommend reading.
The Webkit developers initially chose to tentatively implement this as -webkit-optimize-contrast, but Chromium/Chrome don't seem to be using a version of Webkit that implements this.
Update: 2014-09-12
Chrome 38 now supports image-rendering: pixelated!
Firefox has a bug report open to get image-rendering: pixelated implemented, but -moz-crisp-edges works for now.
Solution?
The most cross-platform, CSS-only solution so far is thus:
canvas {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
Sadly this wont work on all major HTML5 platforms yet (Chrome, in particular).
Of course, one could manually scale up images using nearest-neighbor interpolation onto high-resolution canvas surfaces in javascript, or even pre-scale images server-side, but in my case this will be forbiddingly costly so it is not a viable option.
ImpactJS uses a texture pre-scaling technique to get around all this FUD. Impact's developer, Dominic Szablewski, wrote a very in-depth article about this (he even ended up citing this question in his research).
See Simon's answer for a canvas-based solution that relies on the imageSmoothingEnabled property (not available in older browsers, but simpler than pre-scaling and pretty widely-supported).
Live Demo
If you'd like to test the CSS properties discussed in the MDN article on canvas elements, I've made this fiddle which should display something like this, blurry or not, depending on your browser:
这篇关于在缩放< canvas>时禁用插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！