javascript - 如何在没有像素模糊的情况下调整 html5 画布的大小

Question

我知道您可以使用类似于在此处找到的 css 来缩放画布。但是我有一个 24x24 像素的画布，我想通过 css 制作 600 像素宽。结果是：

照片

有没有一种方法可以只显示像素巨大而不是模糊？

Answer 1

已经试过scale了吗？

canvas.scale(xScale, yScale);

Answer 2

尝试这个

canvas,
img {
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering