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

我知道你可以使用css缩放画布，就像我们发现的那样。但我有一个24x24像素的画布，我想通过css制作600像素宽的画布。其结果是：

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

已经尝试过了

试试这个

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

---

我不确定自己是否正确理解了该方法。当使用除“canvas.scale（1，1）”以外的任何值时，它不再适合画布内部。将cancas设置为600x600，导入24x24图像，并将其缩放25倍。我没有使用24x24图像。我链接的图像是我画布的截图。我正在手动绘制像素。忽略这一点。我没有正确地思考。事件虽然我手动绘制像素，但效果相同。谢谢！我使用这个解决方案来缩小在视网膜上显示的屏幕截图，但这并不能消除meCheck在firefox中的这个例子，在chrome中不起作用如果它在chrome中不起作用，它在Safari、Opera、Yandex、Maxthon和许多其他基于Webkit或Blink的浏览器中都不起作用

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