Canvas

L'elemento canvas consente il rendering degli oggetti grafici su un canvas bitmap dipendente dalla risoluzione.Per disegnare sul canvas vengono usati dei "contesti", come il contesto Canvas 2D, indicato nella specifica HTML Canvas 2D Context. Windows Internet Explorer 9 introduce il supporto dell'elemento canvas, usando l'API di disegno 2D Canvas come contesto. (In Internet Explorer 9 il contesto Canvas 2D è rappresentato dall'oggetto CanvasRenderingContext2D o dall'interfaccia ICanvasRenderingContext2D.) Come tutti gli elementi grafici in Internet Explorer 9, il canvas supporta l'accelerazione hardware tramite Windows e la GPU.

Il canvas supporta scenari di disegno che includono rettangoli, tracciati, linee, riempimenti, archi e curve di Bézier e quadratiche. Inoltre, l'elemento canvas in Internet Explorer 9 supporta gli attributi width e height. I valori predefiniti per la larghezza e l'altezza sono rispettivamente 300 e 150 pixel e il colore predefinito è il nero trasparente.

Il canvas è una modalità di programmazione degli elementi grafici sul Web. Il tag canvas è una “modalità immediata” (i comandi di disegno vengono inviati direttamente all'hardware grafico), una superficie di disegno bidimensionale che puoi usare per creare in tempo reale grafici, animazioni o giochi interattivi senza dover scaricare un plug-in separato. Tramite le API definite dall'oggetto CanvasRenderingContext2D, il canvas supporta i seguenti scenari di disegno, che includono:

Puoi usare JavaScript per animare i disegni sul canvas o creare esperienze interattive in grado di reagire a input da tastiera, clic del mouse o qualsiasi evento del browser. Ad esempio, questo esempio sul sito Internet Explorer Test Drive produce, con poche righe di codice JavaScript, linee brillanti posizionate e colorate in modo casuale.

Internet Explorer 9 e versioni successive supporta le seguenti API del contesto Canvas 2D (membri esposti dall'oggetto CanvasRenderingContext2D):

A partire da IE11 sono inoltre supportate le API Canvas 2D Context, Level 2 seguenti:

  • la proprietà msImageSmoothingEnabled che consente di scegliere tra ridimensionamento bilineare tradizionale e ridimensionamento al vicino più prossimo per ingrandire immagini piccole.
  • supporto del valore della regola di riempimento even-odd nei metodi del canvas fill, clip e isPointInPath. In aggiunta agli attributi della regola di riempimento W3C, IE11 offre msFillRule, una proprietà della regola di riempimento globale. Questa proprietà imposta la regola di riempimento per tutti i metodi, anziché singolarmente per ognuno.
  • i metodi setLineDash, getLineDashelineDashOffset per la creazione di modelli di tratteggio personalizzati.

Informazioni di riferimento sulle API

Canvas

Esempi ed esercitazioni

Come creare grafica 3D con l'elemento canvas
Come eseguire il mapping dei punti tra sistemi di coordinate 2D
Come creare effetti speciali con Canvas
Campionamento dei colori delle immagini con Canvas
Come usare Canvas per creare un gioco di astronavi
Come scegliere tra SVG e Canvas
Esempi di utilizzo di SVG e Canvas

Dimostrazioni di Internet Explorer Test Drive

Canvas Pad
Canvas Pinball
Canvas Zoom
Galactic HTML5 Performance Test
HTML5 Blizzard
Mr. Potato Gun
Particle Acceleration

Post di IEBlog

Galactic: Creazione di un sistema solare in 3D con HTML5
HTML5 nativo: IE10 Platform Preview 1 è disponibile per il download
HTML5 Blizzard: completa accelerazione hardware in azione
Debug dei problemi comuni dei canvas
IE9 include canvas con accelerazione hardware
Considerazioni sull'utilizzo di canvas e SVG

Specifica

Contesto 2D per l'elemento Canvas HTML

Argomenti correlati

Introduzione all'elemento Canvas HTML5
Dietro le quinte di Disney TRON: come creare un sito per libri digitali con HTML5
Guida per gli sviluppatori all'elemento Canvas HTML5
Come creare una libreria visiva di immagini canvas HTML5
Come scrivere un gioco BrikBloc con HTML5 SVG e canvas
Come creare Asteroids con il motore di gioco Impact HTML5
Modernizzare un gioco canvas HTML5: Parte 1 - Scalabilità hardware e CSS3
Modernizzare un gioco canvas HTML5: Parte 2 - Offline, trascinamento della selezione e API dei file
Giochi HTML5: come animare gli sprite nei canvas con EaselJS
Sfruttare tutta la potenza dei canvas con accelerazione hardware HTML5

 

 

Mostra:
© 2014 Microsoft