缩放<canvas>时禁用插值

Question

注意：这与放大时如何渲染现有画布元素有关，而与在画布表面上渲染线条或图形无关。换句话说，这与缩放元素的插值有关，而与在画布上绘制的图形的抗锯齿无关。我不关心浏览器如何画线；我关心的是浏览器在放大时如何渲染canvas元素本身。

是否可以通过编程更改画布属性或浏览器设置以在缩放<canvas>元素时禁用插值？跨浏览器的解决方案是理想的，但不是必需的。基于Webkit的浏览器是我的主要目标。性能非常重要。

这个问题最相似，但不能充分说明问题。对于它的价值，我尝试image-rendering: -webkit-optimize-contrast无济于事。

该应用程序将是用HTML5 + JS编写的“复古” 8位样式游戏，以明确我的需求。

为了说明，这是一个示例。（现场版）

假设我有一张21x21的画布...

<canvas id='b' width='21' height='21'></canvas>

...具有css的元素使元素大5倍（105x105）：

canvas { border: 5px solid #ddd; }

canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

我在画布上绘制一个简单的“ X”，如下所示：

$('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();

});

左图是Chromium（14.0）渲染的图像。右边的图像是我想要的（手绘以作说明用）。

Chrome插值缩放后的画布元素 非插值版本

Answer 1

终于在画布规格中！规范最近添加了一个名为的属性imageSmoothingEnabled，该属性默认为true并确定在非整数坐标上绘制或按比例绘制的图像是否将使用更平滑的算法。如果将其设置为，false则使用最近邻，从而产生较不平滑的图像，而只是制作较大的像素。图像平滑功能只是最近才添加到canvas规范中，并非所有浏览器都支持，但某些浏览器已实现此属性的供应商前缀版本。在上下文中mozImageSmoothingEnabled，Firefox，webkitImageSmoothingEnabledChrome和Safari中存在它们，并将它们设置为false将阻止发生抗锯齿。不幸的是，在撰写本文时，IE9和Opera尚未实现此属性（供应商带有前缀或其他方式）。