Come animare gli elementi grafici dell'area di disegno (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

L'elemento Canvas è un'area disegnabile del documento HTML in cui puoi usare JavaScript per generare grafica, come ad esempio animazioni, grafici e giochi. Questo argomento ti fornisce le informazioni preliminari e descrive i passaggi necessari per animare un disegno di base con l'elemento Canvas.

Prerequisiti

Questo argomento parte dal presupposto che tu:

• Sappia creare una semplice app di Windows Store usando JavaScript e il modello della Libreria Windows per JavaScript.
• Abbia una conoscenza di base dei linguaggi HTML e JavaScript.

Per informazioni sulla creazione della tua prima app di Windows Store in JavaScript, vedi Creazione della prima app di Windows Store in JavaScript. Per istruzioni sull'uso del modello WinJS, vedi Come ottenere e usare il toolkit WinJS.

Istruzioni

Passaggio 1: Impostazione degli intervalli per l'animazione

Il metodo requestAnimationFrame consente di iniziare un'animazione specificando una funzione da chiamare (callback) ogni volta che occorre aggiornare l'animazione per ridisegnarla di nuovo:

requestAnimationFrame(animationFunction);

requestAnimationFrame tiene in considerazione la visibilità della pagina e la frequenza di aggiornamento della visualizzazione per determinare il numero di fotogrammi al secondo da allocare all'animazione (ovvero per chiamare animationFunction).

Il nostro esempio JavaScript disegna un cerchio animato che si muove a spirale attorno a un cerchio più grande.

requestAnimationFrame(draw);

Ecco la nostra animazione (i risultati possono variare, con movimenti più o meno veloci a seconda della velocità dell'hardware):

Passaggio 2: Disegno dell'immagine

1. Cancellare l'elemento Canvas

   Prima di disegnare ciascun fotogramma, dovrai cancellare l'elemento Canvas.

   Puoi cancellare un elemento Canvas o parti di un'immagine in vari modi, ad esempio cancellando determinate aree con la proprietà globalCompositOperation oppure tagliando i percorsi con il metodo clip. Il modo più semplice per cancellare un elemento Canvas consiste nell'usare il metodo clearRect.

   Nel nostro esempio, per cancellare l'intero elemento Canvas viene usato il metodo clearRect, ma per facilitare la visualizzazione degli effetti del disegno dell'immagine il metodo clearRect è commentato. Se questa riga di codice non avesse un commento, vedresti un unico cerchio muoversi a spirale attorno a un'orbita circolare più grande e la relativa traccia verrebbe cancellata prima che vengano disegnati i singoli fotogrammi.

   // The clearRect method clears the entire canvas.
   context.clearRect(0, 0, 160, 160);
   

2. Salvare lo stato dell'elemento Canvas

   Nel disegnare l'immagine, puoi modificare alcune delle impostazioni, ad esempio stili o trasformazioni. Se desideri usare le impostazioni originali quando cominci a ridisegnare l'immagine, puoi usare il metodo save.

   I metodi save e restore vengono usati per salvare e recuperare lo stato dell'elemento Canvas in uno stack. Lo stato dell'elemento Canvas è formato da tutti gli stili e le trasformazioni applicati. Ogni volta che si chiama il metodo save, lo stato corrente dell'elemento Canvas viene salvato nello stack. Il metodo restore restituisce l'ultimo stato salvato dello stack.

   Nel nostro esempio, usiamo il metodo save subito prima di impostare alcune trasformazioni per il disegno e spostare il cerchio animato.

   // Save the canvas state.
   context.save();
   

3. Disegnare l'immagine

   Quando si disegna l'immagine sull'elemento Canvas, puoi usare due trasformazioni per apportare modifiche all'immagine: i metodi translate e rotate.

   Il metodo translate viene usato per spostare l'elemento Canvas e la relativa origine in un altro punto della griglia del Canvas:

   translate(x, y)
   

   Questo metodo accetta due argomenti: x, vale a dire la parte di Canvas spostata a sinistra o a destra, e y, la parte che viene spostata in alto o in basso.

   È opportuno salvare lo stato del Canvas prima di qualsiasi trasformazione, in quanto è più semplice chiamare il metodo restore piuttosto che eseguire una trasformazione inversa per riportare il Canvas allo stato originale. Il metodo translate consente di posizionare l'immagine in qualsiasi punto del Canvas senza regolare manualmente le coordinate.

   Il metodo rotate viene usato per ruotare il Canvas attorno all'origine corrente. Questo metodo dispone di un solo parametro, vale a dire l'angolo intorno al quale viene ruotato il Canvas, misurato in radianti.

   rotate(angle)
   

   La rotazione avviene in senso orario, e il punto centrale di rotazione è sempre l'origine del Canvas (l'angolo superiore sinistro). Per spostare il punto centrale, dovrai spostare il Canvas usando il metodo translate.

   Nel nostro esempio, alterneremo alcune chiamate ai metodi translate e rotate. La prima chiamata al metodo translate centra l'animazione sul Canvas.

   Successivamente eseguiremo due serie di chiamate ai metodi rotate e translate. La prima chiamata ai metodi rotate e translate produrrà un piccolo cerchio disegnato intorno al Canvas in un cerchio grande. La seconda serie di chiamate produrrà un piccolo cerchio che viene disegnato in un'orbita più piccola.

   Le dimensioni del Canvas sono impostate su 160 pixel di altezza e 160 di larghezza, per cui, per centrare l'animazione nel Canvas imposteremo le coordinate x e y del metodo translate su 80.

   // centers the image on the canvas             
   context.translate(80, 80);
   

   Cominciamo la nostra prima chiamata al metodo rotate usando l'oggetto date per calcolare il parametro del metodo rotate. Questo parametro è l'angolo intorno al quale deve essere ruotato il Canvas.

   var time = new Date();
   context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
   

   Nota che il valore utilizzato per calcolare getSeconds è 60, mentre il valore per calcolare getMilliseconds è 60.000.

   Il metodo translate sposta la coordinata x che muove il cerchio rotante intorno al Canvas in un'orbita grande.

   // Translate determines the size of the circle's orbit.
   context.translate(50, 0);
   

   Questo è l'effetto dei primi metodi rotate e translate:

   

   Le successive due chiamate ai metodi rotate e translate creano un'orbita più piccola dei cerchi in circolo.

   // Rotate causes the circle to move in a small orbit.
   context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
   
   // Translate determines the size of the orbit.
   context.translate(0, 5);
   

   Nota che nel calcolo dell'angolo per la seconda chiamata al metodo rotate, il valore usato per calcolare getSeconds è 6 e il valore per calcolare getMilliseconds è 6.000.

   Se i primi metodi rotate e translate vengono inseriti come commenti, ecco cosa disegneranno i metodi rotate e translate successivi:

   

   Dopo aver impostato il riposizionamento, il cerchio viene disegnato sul Canvas.

   // This draws the repositioned circle
   context.beginPath();
   context.arc(5, 5, 4, 0, Math.PI*2, true); 
   context.stroke();
   

4. Ripristinare lo stato del Canvas

   Abbiamo già salvato lo stato dell'area di disegno nel passaggio b, perciò ora reimpostiamo lo stato dell'area di disegno per disegnare la prossima cornice.

   // Restores the canvas to the previous state
   context.restore();
   

Esempi completi

Grafica animata

Questo esempio JavaScript disegna un cerchio animato che si muove a spirale attorno a un cerchio più grande.

window.onload = init;
  
// As an optimization, make "context" a global variable that is only set once.
var context;
  
function init(){
  context = document.getElementById('canvas').getContext('2d');    
  window.requestAnimationFrame(draw);
} // init

function draw() {
  // Save the canvas state.
  context.save();         
  
  // context.clearRect(0, 0, 160, 160);

  // centers the image on the canvas             
  context.translate(80, 80); 
  
  // Rotate moves the spiraling circle around the canvas in a large orbit.
  var time = new Date();
  context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  
  // Translate determines the location of the small circle.
  context.translate(50, 0);  
  
  // Rotate causes the circle to spiral as it circles around the canvas.
  context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  
  // determines the size of the loop
  context.translate(0, 5);  
  
  // This draws the circle
  context.beginPath();
  context.arc(5, 5, 4, 0, Math.PI*2, true); 
  context.stroke();
  
  // Restores the canvas to the previous state
  context.restore();
  window.requestAnimationFrame(draw);
}  // draw

Questo è un esempio di Cascading Style Sheets (CSS) che crea un bordo nero attorno a un elemento Canvas.

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Questo file HTML crea un elemento Canvas che usa file JavaScript e CSS esterni.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="160" height="160" />
    </body>
</html>

Argomenti correlati

Guida introduttiva: Disegno in un elemento Canvas