解决 HTML Canvas 图像渲染降级问题

Question

这些天，在尝试使用 canvas 在 HTML 页面中渲染一些图形时，我遇到了以下问题：一段时间后，canvas 元素在渲染时会降级我的图像。

这是可视化的问题：

要渲染的图像 (32x32)

首次渲染（使用浏览器缩放）

图像如何随机移动（通过键盘事件）

注意1：我没有调整图像大小！

注 2：负责绘制的函数每 10 毫秒调用一次

注3：我image-rendering: pixelated在CSS中使用canvas

注 4：这是负责绘制它的函数：

    function draw_player(x,y,w,h,state){    
        if(state>2){ctx.drawImage(player_sprite_jump, x,y, w,h)}
        if(state<=1){ctx.drawImage(player_sprite_left, x,y, w,h)}       
        if(state===2){ctx.drawImage(player_sprite_right, x,y, w,h)}
}

（w 和 h 再次为 32，我不会在任何地方调整图像大小！）

注 5：我使用 HTML、CSS 和普通 JS

如果需要任何其他信息，我愿意贡献。

请帮忙！

Answer 1

基本上，它是由 发生的imageSmoothingEnabled，默认设置为“true”它试图平滑图像，并消除像素的清晰度！解决： ctx.imageSmoothingEnabled = false;