如何HTML5画布图像缩放问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (110)

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

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

然而,画布使用双立方图像缩放,因此像素艺术图像在2x和更高处看起来很糟糕。有没有办法强制画布使用最近缩放或可能使用自定义方法来缩放图像?如果不是这意味着图像必须事先缩放到像Paint.net这样的东西吗?

提问于
用户回答回答于

通过JavaScript:

ctx.imageSmoothingEnabled = false;

在Gecko上,需要

ctx.mozImageSmoothingEnabled = false;

在Webkit上,需要

ctx.webkitImageSmoothingEnabled = false;

我无法在其他浏览器上找到有关此属性支持的信息,因此他们可能不支持它。

通过CSS:

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

<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>

扫码关注云+社区

领取腾讯云代金券