Javascript 解决HTML画布图像渲染降级问题

现在，当我试图用canvas在HTML页面中呈现一些图形时，我遇到了以下问题：canvas元素在一段时间后，在呈现图像时降级了

以下是可视化的问题：

要渲染的图像（32x32）

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

在一些移动（通过键盘事件）后，图像是如何随机获得的

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

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

注3：我正在CSS中为画布使用

图像渲染：像素化

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

函数绘制\u播放器（x、y、w、h、状态）{
如果（状态>2）{ctx.drawImage（玩家\精灵\跳跃，x，y，w，h）}
如果（状态基本上是由
imageSmoothingEnabled
发生的，则默认设置为“true”

它试图平滑图像，并删除像素的清晰度

分辨率：
ctx.imageSmoothingEnabled=false；
您必须创建一个完整的片段，您必须在像素边界处进行渲染。如果您没有使用
变换
、
缩放
、
旋转
、
平移
或
设置变换
，则可以使用
ctx.drawIma对齐像素边界ge（img，Math.round（x），Math.round（y），w，h）；
（生成x和y整数值）您也可以通过设置
ctx.imageSmoothingEnabled=false来使用最近的像素进行渲染，但是仍然需要与像素对齐以避免伪影。是的，我刚刚找到了原因！
    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)}
}