Animazioni nel Canvas

Le animazioni nel Canvas di HTML5 possono trasformare una pagina statica in un ambiente dinamico e interattivo. Nella lezione di oggi, impareremo le basi della creazione di animazioni nel Canvas creando una semplice animazione di una pallina che si sposta da destra a sinistra.

Preparazione dell'Ambiente

Prima di iniziare a disegnare e animare, dobbiamo preparare il nostro canvas. Includiamo l'elemento < canvas>< /canvas> nel nostro HTML e assicuriamoci di dare un id per poterlo referenziare nel nostro JavaScript.

Il codice HTML per il canvas può apparire così:

< canvas height="400" id="mioCanvas" width="800">< /canvas>

Impostazione della Scena per l'Animazione

Per prima cosa, definiamo la pallina che vogliamo animare. Inizializziamo le variabili per la posizione, la velocità e le dimensioni della pallina nel nostro script JavaScript.

Esempio di codice JavaScript per definire la pallina:

var canvas = document.getElementById('mioCanvas');
var ctx = canvas.getContext('2d');
var x = canvas.width; // iniziamo da destra
var y = canvas.height / 2; // a metà altezza
var radius = 10; // raggio della pallina
var speed = 2; // velocità di spostamento
ctx.fillStyle = "red";

Disegnare la Pallina

Creiamo una funzione che disegna la pallina sul canvas. Questa funzione disegnerà un cerchio pieno nella posizione corrente (x, y) che rappresenta la nostra pallina.

Funzione per disegnare la pallina:

function drawBall() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI 2, true);
ctx.closePath();
ctx.fill();
}

Creare l'Animazione

Ora che abbiamo la funzione per disegnare la pallina, creiamo l'animazione facendo muovere la pallina da destra a sinistra. Utilizzeremo requestAnimationFrame per creare un loop di animazione.

La funzione requestAnimationFrame() dice al browser di eseguire una specifica funzione per aggiornare un'animazione prima del prossimo repaint.

Ogni volta che la funzione di animazione viene eseguita, sposteremo la pallina verso sinistra aggiornando la variabile x e poi cancelleremo il canvas e disegneremo la pallina nella nuova posizione.

Funzione per aggiornare l'animazione:

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x = x + speed;
raf = window.requestAnimationFrame(animate);
}
animate();

Conclusione

Con queste basi, hai creato la tua prima animazione nel Canvas di HTML5. La pallina si sposta ora fluidamente da destra a sinistra sullo schermo. Puoi sperimentare modificando la velocità, le dimensioni della pallina, o introducendo nuovi elementi da animare. L'animazione nel Canvas apre un mondo di possibilità per la creazione di giochi, simulazioni e altro ancora!