Javascript 缩放a时禁用插值<；帆布>；

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

---

在缩放

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

是最相似的，但没有充分说明问题。为了它的价值，我尝试了

图像渲染：-webkit优化对比度
但没有效果

该应用程序将是一个“复古”8位风格的游戏，用HTML5+JS编写，以明确我需要什么


为了举例说明，这里有一个例子。（）

假设我有一个21x21画布

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

我在画布上画了一个简单的“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）渲染的。右边的图片是我想要的（为了说明目的而手绘）

编辑2012年7月31日-此功能现在已在画布规范中！请参见此处的单独答案：


古老的答案是留给后代的


根据您想要的效果，您可以选择以下选项：

var can = document.getElementById('b');
var ctx = can.getContext('2d');
ctx.scale(5,5);
$('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();
});


这就产生了：


可能不是你想要的。但是如果你只是想得到零模糊，那么这就是问题所在，所以我会提供它以防万一

一个更困难的选择是使用像素操作，并为这项工作自己编写算法。第一个图像的每个像素成为新图像上的5x5像素块。使用imagedata不会太难

但是画布和CSS本身并不能帮助您在这里以您想要的确切效果将一个画布和CSS缩放到另一个画布。
上次更新：2014-09-12
是否有画布属性或浏览器设置，我可以通过编程更改以禁用缩放元素时的插值

答案是也许有一天。现在，你必须求助于黑客来获得你想要的


图像渲染
这应该符合我的要求：

image rendering属性向用户代理提供一个提示，提示在缩放图像时，图像的哪些方面最需要保留，以帮助用户代理选择适当的缩放算法

本规范概述了三个可接受的值：
auto
、
crisp edges
、和
像素化

像素化：

放大图像时，必须使用“最近邻”或类似算法，以便图像看起来只是由非常大的像素组成。缩小比例时，这与“自动”相同

标准跨浏览器？
由于这仅仅是一个工作草案，无法保证它会成为标准。目前对浏览器的支持充其量也不稳定

我强烈推荐阅读Mozilla开发者网络

Webkit开发人员最初选择这样做，但Chrome/Chrome似乎没有使用实现这一点的Webkit版本

更新：2014-09-12

!

Firefox有一个开放的
图像渲染：实现了像素化
，但是
-moz-crisp-edges
目前还可以使用

解决方案
迄今为止，最跨平台、CSS唯一的解决方案是：

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                            */
}

不幸的是，这还不能在所有主要的HTML5平台上运行（尤其是Chrome）

当然，可以使用javascript在高分辨率画布表面上使用最近邻插值手动放大图像，甚至可以在服务器端预缩放图像，但在我的情况下，这将是非常昂贵的，因此这不是一个可行的选择

使用纹理预缩放技术绕过所有FUD。Impact的开发者多米尼克·萨布尔夫斯基（他甚至在研究中引用了这个问题）

有关依赖于
imageSmoothingEnabled
属性的基于画布的解决方案，请参见（在较旧的浏览器中不可用，但比预缩放更简单，并且得到广泛支持）

现场演示
如果您想测试
canvas
elements上的MDN文章中讨论的CSS属性，我将根据您的浏览器，制作一个显示如下内容（模糊或不模糊）的样式：
在google chrome中，画布图像模式不会被插值

下面是一个根据namuol答案编辑的工作示例

新答案2012年7月31日

这终于在画布规范中了

该规范最近添加了一个名为
imageSmoothingEnabled
的属性，该属性默认为
true
，并确定在非整数坐标上绘制或按比例绘制的图像是否将使用更平滑的算法。如果设置为
false
，则使用最近邻，生成不太平滑的图像，而只是生成更大的像素

图像平滑最近才添加到canvas规范中，并非所有浏览器都支持图像平滑，但某些浏览器已实现此属性的供应商前缀版本。在上下文中，Firefox中存在
mozImageSmoothingEnabled
，Chrome和Safari中存在
webkitImageSmoothingEnabled
，将它们设置为false将停止出现抗锯齿。不幸的是，在撰写本文时，IE9和Opera还没有实现这个属性（以供应商为前缀或其他方式）


预览：

结果:

explicated很有希望，因为它适用于：


Chrome 22.0.1229.79 Mac OS X 10.6.8
Chr
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                            */
}

ctx.scale(4, 4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, 64, 64);