Estoy tratando de mover una imagen en el lienzo de HTML5, pero cuando se mueve, crea un rastro/línea largo detrás de él. No estoy seguro de cómo hacer que solo se mueva la imagen sin que aparezca una línea de seguimiento larga. Cualquier ayuda sería muy apreciada
//Create bullets class Projectile { constructor({position, velocity}){ this.position = position this.velocity = velocity this.width = 5 this.height = 10 this.color = "red"; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.position.x, this.position.y, this.width, this.height); } update() { this.draw() this.position.x += this.velocity.x this.position.y += this.velocity.y } } const projectiles = [new Projectile({ position: { x: 300, y: 300 }, velocity: { x: 0, y: 0 } })] function animate() { projectiles.forEach(projectile => { projectile.update() }) } animate()Tienes que despejar el lienzo entre las llamadas de sorteo de actualización, de lo contrario, los proyectiles se dibujan una y otra vez. Puede usar clearRect o vaciar el lienzo por su cuenta de esta manera:
ctx.fillStyle = 'black'; //try out 'rgba(0,0,0,0.9)' ctx.fillRect(0,0,canvas.width,canvas.height);