Share via


Uso di grafica con Canvas, SVG e CSS3 (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 ]

Questa sezione contiene informazioni sull'uso della grafica nelle di Windows Store in JavaScript.

Contenuto della sezione

Argomento Descrizione

Guida introduttiva: Disegnare un elemento Canvas

L'elemento Canvas crea un'area di disegno bitmap rettangolare in cui è possibile usare JavaScript per disegnare immagini grafiche al momento. L'area di disegno è un'ottima soluzione per creare giochi o per qualsiasi situazione in cui è richiesta la generazione di grafica in tempo reale o la modifica di grafica a intervalli regolari.

Come animare grafica canvas

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.

Come creare una sfumatura

Forme e linee non sono realizzabili solo in tinta unita. Una sfumatura nell'area di disegno costituisce effettivamente un tipo di valore colore che puoi applicare alle proprietà fillStyle e strokeStyle.

Si possono usare le sfumature per produrre una modifica direzionale dell'intensità o del colore di un'immagine. Questa possibilità è utile per produrre immagini di sfondo, indicare l'altitudine sulle cartine oppure ovunque si desideri aggiungere luce e ombreggiature a una superficie.

Le sfumature ti aiutano a semplificare le applicazioni Web perché grazie a loro puoi ottenere questi effetti senza usare le immagini e quindi ridurre al minimo la larghezza di banda e il tempo necessari al caricamento. Inoltre, siccome vengono prodotte a livello di programmazione, è facile ridimensionarle e riusarle.

Come visualizzare un'immagine

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 visualizzare un'immagine con l'elemento Canvas.

 

Puoi usare gli elementi Canvas CSS e SVG nelle app di Windows Store per aggiungere grafica vettoriale veloce e leggera e per applicare un'animazione all'interfaccia utente.

Quasi ogni elemento grafico vettoriale può essere disegnato usando SVG o Canvas, ma talvolta resta ancora del lavoro da fare per lo sviluppatore o il computer, a seconda dell'attività.

In particolare, le trasformazioni 2D CSS3 (Cascading Style Sheets, livello 3) consentono di traslare (spostare), ruotare, scalare e inclinare oggetti nello spazio 2D. Le trasformazioni 3D CSS3 supportano queste stesse trasformazioni nello spazio 3D, con l'aggiunta della possibilità di simulare un senso di profondità tramite una trasformazione prospettica.

Quando si specificano più trasformazioni singolarmente, i risultati delle trasformazioni sono cumulativi e dipendono dall'ordine con cui sono applicate.