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
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 metodoclip
. Il modo più semplice per cancellare un elemento Canvas consiste nell'usare il metodoclearRect
.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 metodoclearRect
è 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);
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
erestore
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 metodosave
, lo stato corrente dell'elemento Canvas viene salvato nello stack. Il metodorestore
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();
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 metodotranslate
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
erotate
. La prima chiamata al metodotranslate
centra l'animazione sul Canvas.Successivamente eseguiremo due serie di chiamate ai metodi
rotate
etranslate
. La prima chiamata ai metodirotate
etranslate
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'oggettodate
per calcolare il parametro del metodorotate
. 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 calcolaregetMilliseconds
è 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
etranslate
:Le successive due chiamate ai metodi
rotate
etranslate
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 calcolaregetMilliseconds
è 6.000.Se i primi metodi
rotate
etranslate
vengono inseriti come commenti, ecco cosa disegneranno i metodirotate
etranslate
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();
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>