缩放<canvas>时禁用插值

一尘不染

缩放<canvas>时禁用插值

javascript

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

是否可以通过编程更改画布属性或浏览器设置以在缩放

这个问题最相似，但不能充分说明问题。对于它的价值，我尝试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）渲染的图像。右边的图像是我想要的（手绘以作说明用）。

阅读 665

2020-05-06

共1个答案

一尘不染

是否可以通过编程更改画布属性或浏览器设置以在缩放元素时禁用插值？

答案可能是有一天。目前，您必须借助黑客手段来获得所需的东西。

image-rendering

CSS3的工作草案概述了一个新属性，image-rendering该属性应该可以实现我想要的功能：

图像渲染属性向用户代理提供了有关在缩放图像时哪些方面最重要保留的提示，以帮助用户代理选择适当的缩放算法。

该规范概述接受三个值：auto，crisp-edges，和pixelated。

像素化：

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

标准？跨浏览器？
由于这只是工作草案，因此无法保证这将成为标准。目前，对浏览器的支持充其量是最多的。

Mozilla开发人员网络上有一个非常详尽的页面，专门介绍当前的技术水平，我强烈建议阅读。

Webkit开发人员最初选择暂时将其实现为-webkit-optimize-contrast，但Chromium / Chrome似乎并没有使用实现此功能的Webkit版本。

更新

Chrome 38现在支持image-rendering: pixelated！

Firefox有一个漏洞报告可以image-rendering: pixelated实施，但-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的高分辨率画布表面上，甚至可以在服务器端预先缩放图像，但是在我的情况下，这代价高昂，因此这不是一个可行的选择。

2020-05-06