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

Question

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

Photo

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

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