解决 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;