HTML5 Canvas 图像缩放问题

2022-01-17 00:00:00 html html5-canvas nearest-neighbor bicubic

我正在尝试在 HTML5 画布中制作像素艺术主题游戏，作为其中的一部分，我使用以下代码将 10x20 左右大小的图像绘制到画布上:

I am trying to make a pixel art themed game in HTML5 canvas, and as part of that I take 10x20 or so sized images and draw them onto the canvas with the following code:

ctx.drawImage(image, 20, 20, 100, 200);

但是画布使用双三次图像缩放，因此像素艺术图像在 2 倍及以上时看起来很糟糕.有没有办法强制画布使用最近邻缩放或可能使用自定义方法来缩放图像?如果不是，这是否意味着必须事先在 Paint.net 中对图像进行缩放?

However the canvas uses bicubic image scaling and hence the pixel art images look terrible at 2x and up. Is there a way to force canvas to use nearest neighbor scaling or possibly use a custom method to scale images? If not does that mean the images have to be scaled beforehand in something like Paint.net?

推荐答案

选择以下任意一项:

通过 JavaScript:

ctx.imageSmoothingEnabled = false;

来源:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing

在 Gecko 上，您需要

On Gecko, you'll need

ctx.mozImageSmoothingEnabled = false;

来源:https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes

在 Webkit 上，您需要

On Webkit, you'll need

ctx.webkitImageSmoothingEnabled = false;

来源:https://bugs.webkit.org/show_bug.cgi?id=82804

我找不到其他浏览器支持此属性的信息，所以他们可能不支持它.

I couldn't find information on support of this property on other browsers, so they probably don't support it.

通过 CSS:

另一种选择是在画布上使用一组 CSS 规则.例如:

Another option is to use a set of CSS rules on the canvas. For example:

<canvas id="c" width="16" height="16"></canvas>
<script>
  var c = document.getElementById("c"),
      cx = c.getContext("2d"),
      im = new Image();
  im.src = "http://stackoverflow.com/favicon.ico"; // 16x16
  cx.drawImage(im, 0, 0);
</script>
<style>
  canvas {
    width: 32px;
    height: 32px;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  }
</style>

来源:https://developer.mozilla.org/en/CSS/图像渲染
来源:https://bugs.webkit.org/show_bug.cgi?id=56627

通过像素例程:

另一种选择是自己使用画布像素操作例程:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation.不过，这还有很多工作要做.

Yet another option is to do it yourself using the canvas pixel manipulation routines: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation. That's a lot more work, though.

相关文章