Animazione Canvas HTML5

Per disegnare un'animazione visiva in HTML5 canvas, devi disegnare ogni fotogramma dell'immagine e poi passare da un fotogramma all'altro in un breve lasso di tempo, creando così l'effetto animato.

Esempio online

Per disegnare un'animazione su un canvas HTML5, devi disegnare e ridisegnare i fotogrammi dell'animazione sul canvas. Devi farlo molto rapidamente per far sembrare molte immagini come un'animazione.
Per ottenere prestazioni ottimali per l'animazione, requestAnimationFrame utilizza una funzione di callback sul oggetto window. Puoi chiamare questa funzione e passare come parametro un'altra funzione che verrà chiamata quando il browser è pronto a disegnare il prossimo fotogramma dell'animazione.
Quando il browser si prepara a disegnare il prossimo fotogramma, inviando un segnale all'applicazione, il browser può abilitare l'accelerazione hardware per l'animazione e coordinare il ridisegno dei fotogrammi con altre attività di ridisegno nel browser. rispetto al tempo di disegno dei fotogrammi dell'animazione utilizzando la funzione setTimeout() di JavaScript, l'esperienza complessiva dovrebbe essere molto migliore.
Questo è un esempio di codice:

function animate() {
　　　　reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start = +new Date();
　　　callback(start);
　　　finish = +new Date();
　　　self.timeout = 1000/60 - (finish - start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

La funzione animate() ottiene il riferimento a questa funzione requestAnimationFrame(). Nota che questo nome può essere diverso in diversi browser. Imposta la variabile reqAnimFrame a tutti questi possibili funzioni non nulli.
In secondo luogo, la funzione reqAnimFrame() chiama la funzione, passando la funzione animate() come parametro. Pertanto, quando il browser è pronto a disegnare il prossimo frame, la funzione animate() chiama questa funzione.
In terzo luogo, la funzione animate() chiama la funzione draw(). draw() non è mostrata nell'esempio. Dovrebbe fare è, prima di tutto cancellare il canvas (o il numero di canvas da cancellare), quindi disegnare il prossimo frame dell'animazione.
Un'altra cosa non mostrata nell'esempio è che animate() deve essere chiamata una volta per avviare l'animazione. Senza di essa, requestAnimationFrame() non chiamerà mai la funzione e l'animazione non inizierà mai il ciclo.
Questo è un esempio di animazione che sposta un singolo rettangolo su un canvas:

Il codice per l'animazione canvas è il seguente:

<canvas id="ex1" width="500" height="170" style="border: 1px solid #cccccc;">
HTML5 Canvas non supportato
</canvas>
<script>
var x = 0;
var y = 15;
var speed = 5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start = +new Date();
　　　callback(start);
　　　finish = +new Date();
　　　self.timeout = 1000/60 - (finish - start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x += speed;
if(x <= 0 || x >= 475){
speed = -speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 25, 25);
}
animate();
</script>