Estoy usando una técnica de líneas de dibujo animadas para crear líneas entre cada uno de mis puntos. Una vez que se activa un punto, quiero que se elimine un punto anterior. Configuré clearRect fuera de mi intervalo pero no elimina la línea anterior. En mi código anterior (antes de que se creara setInterval) funcionó perfectamente, ya que al agregar setinterval, no tanto.

Aquí está el guión solo para la creación clara /. Gracias por tu ayuda.

 function draw(st,en){ var c = document.getElementById("map_id"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height); ctx.translate(0.5, 0.5); var amount = 0; setInterval(function() { amount += 0.05; // change to alter duration if (amount > 1) amount = 1; ctx.clearRect(0, 0, c.width, c.height); ctx.strokeStyle = "#ccc"; ctx.moveTo(st['x'], st['y']); ctx.lineWidth = 5; // lerp : a + (b - a) * f ctx.lineTo(st['x'] + (en['x'] - st['x']) * amount, st['y'] + (en['y'] - st['y']) * amount); ctx.stroke(); }, 30); }

ACTUALIZAR **** Encontré una publicación sobre mi problema. Dice que necesito incluir beginPath. Lo hice, pero ahora mis líneas parpadean, lo que significa que setInterval no se detiene una vez que se completa.

Por lo tanto, verificar que se complete la línea dibujada para desactivar el intervalo es la solución. Casi ahí.