déplacer le cercle dans la toile

Question

Je veux déplacer le cercle 300px à droite, puis l'arrêter. Je n'ai aucune idée comment je peux le faire. Quand je cherchais des tutoriels, j'ai toujours vu des boucles sans fin. Dans la documentation je lis sur les intervalles de temps, mais je ne pense pas que cette bonne idée pour ce problème. Je veux que ça soit joli, alors je veux que ça bouge tous les 1px et efface-le. Je veux que ça marche lentement.

Voici mon code:

var canvas = document.querySelector('canvas'); 
 
canvas.width = window.innerWidth; 
 
canvas.height = window.innerHeight; 
 

 
var c = canvas.getContext('2d'); 
 
c.beginPath(); 
 
c.arc(100, 300, 100, 0, 2 * Math.PI, false); 
 
c.stroke(); 
 

 
for (var i = 0; i < 300; i++) { 
 
    console.log("dasd"); 
 
    c.beginPath(); 
 
    // c.clearRect(0, 0, window.innerWidth, window.innerHeight); 
 
    c.arc(100 + i, 300, 100, 0, 2 * Math.PI, false); 
 
    c.stroke(); 
 
}

canvas { 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<canvas></canvas>

Answer 1

Vous devez utiliser requestAnimationFrame - et vous pouvez en savoir plus sur canvas animation

var canvas = document.querySelector('canvas'); 
 
canvas.width = window.innerWidth; 
 
canvas.height = window.innerHeight; 
 

 
var c = canvas.getContext('2d'); 
 

 
var start = null; 
 
function step(timestamp) { 
 
    if (!start) start = timestamp; 
 
    var progress = timestamp - start; 
 
    c.beginPath(); 
 
    c.clearRect(0, 0, window.innerWidth, window.innerHeight); 
 
    c.arc(100 + progress, 100, 100, 0, 2 * Math.PI, false); 
 
    c.stroke(); 
 
    if (progress < 300) { 
 
    window.requestAnimationFrame(step); 
 
    } 
 
} 
 

 
window.requestAnimationFrame(step);

canvas { 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<canvas></canvas>