Javascript Canvas - 移动时图像模糊

Question

当我使用

ctx.drawImage( )

时，图像看起来非常清晰。当我在更新循环中移动图像时，问题就开始了——图像变得模糊。图像移动得越快，它们就越模糊。

这是一个简单的

Bullet

类，它会更新然后在

update( )

循环中绘制。

ctx.imageSmoothingEnabled = false;

class Bullet {
    constructor( owner, position, angle, radius, flip ) {
        this.id = Math.random( );
        this.angle = angle;
        this.position = {
            x: radius * Math.cos( angle ) + position.x,
            y: radius * Math.sin( angle ) + position.y
        };
        this.speed = universal.size * 10;
        this.size = universal.size/10;
        this.img = Images['bullet'];
        this.flip = flip;
    
        BULLET_LIST[this.id] = this;
    }
    update( ) {        
        this.position.x += Math.cos( this.angle ) * this.speed * delta;
        this.position.y += Math.sin( this.angle ) * this.speed * delta;
    }
    draw( ) {
    
        ctx.save( );
        ctx.translate( this.position.x - camera.position.x, this.position.y - camera.position.y );
        ctx.rotate( this.angle );
        ctx.scale( 1, this.flip ? -1 : 1);
    
        ctx.drawImage( this.img, -this.img.width/this.img.height * this.size/2, -this.size/2, this.img.width/this.img.height * this.size, this.size );
    
        ctx.restore( );
    }
}

function update( ) {
    ctx.clearRect( 0, 0, c.width, c.height );

    for( var b in BULLET_LIST ) {
        BULLET_LIST[b].update( );
        BULLET_LIST[b].draw( );
    }

    requestAnimationFrame( update );
}

我已经尝试应用

Math.floor( )

将输入转换为

drawImage( )

调用的整数，但它看起来更糟。运动变得更加像素化。

每秒帧数读取恒定的 60fps，没有任何滞后或尖峰，所以我知道这不是性能问题

当我在高端 165Hz 计算机上测试时，即使在移动时图像看起来也很清晰。

有没有办法解决或改进这个问题，或者这就是 Canvas 在 60Hz 显示器上的工作方式？