图像渲染：像素化不适用于我的 javascript canvas

Question

我正在尝试将我的 pixelart 添加到 canvas，但我遇到了问题。 该图像模糊所以我添加了 canvas css 样式图像渲染：像素化。 但它和以前一样。 当我将相同的样式添加到 canvas 之外的图像时，它的像素化效果很好。 有人可以给我提示吗？ 为什么它在 canvas 中不起作用？ 谢谢大家的回复！

Javascript：

    ctx.drawImage(this.img, this.x - this.size/2, this.y - this.size/2, this.size, this.size)

CSS：

#canvas {
    position: relative;
    image-rendering: pixelated;
    width: 256px;
    height: 256px;
}

Answer 1

这可能是因为imageSmoothingEnabled是 Canvas 上下文的一部分。 ( 更多)

默认情况下，它设置为true ，这会导致此问题。

设置imageSmoothingEnabled = false ;

我强烈建议每次更改画布大小时都将此属性设置为 false ( Source )