Il codice HTML <canvas> elemento viene utilizzato per disegnare elementi grafici in una pagina web.
Il grafico a sinistra è creato con <canvas> . Essa mostra quattro elementi: un rettangolo rosso, un rettangolo gradiente, un rettangolo multicolore, e un testo multicolore.
Cosa è l'HTML Canvas ?
Il codice HTML <canvas> elemento viene utilizzato per disegnare elementi grafici, al volo, tramite script (usually JavaScript) .
Il <canvas> elemento è soltanto un contenitore per la grafica. È necessario utilizzare uno script per disegnare in realtà la grafica.
Canvas ha diversi metodi per disegnare percorsi, scatole, cerchi, testo e aggiungendo immagini.
L'elemento tela è parte di HTML5 e permette dinamica, resa script di forme 2D e immagini bitmap. Si tratta di un livello basso, modello procedurale che aggiorna una bitmap e non ha un grafico scena built-in.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Storia
Canvas è stato inizialmente introdotto da Apple per l'utilizzo all'interno della propria componente X WebKit di Mac OS nel 2004 le applicazioni che alimentano come widget Dashboard e il browser Safari.
Più tardi, nel 2005 è stato adottato nella versione 1.8 del browser Gecko, e Opera nel 2006, e standardizzato da Hypertext Application Technology Group di lavoro Web (WHATWG) sulle nuove specifiche proposte per le tecnologie web di nuova generazione.
uso
Tela consiste di una regione drawable definito nel codice HTML con attributi altezza e larghezza. codice JavaScript può accedere all'area attraverso una serie completa di disegno funzioni simili a quelle di altre API 2D comuni, consentendo così generato grafici dinamicamente.
Alcuni usi attesi tela includono grafici costruzione, animazioni, giochi e la composizione dell'immagine.
Canvas Esempi
Una canvas è un'area rettangolare in una pagina HTML. Per impostazione predefinita, una canvas non ha confini e nessun contenuto.
Il markup simile a questa:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: specificare sempre un attributo id (to be referred to in a script) , e una larghezza e un'altezza attributo per definire le dimensioni della canvas .
Per aggiungere un bordo, utilizzare lo style attributi:
Base Canvas Esempio
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Prova tu stesso " Disegnare con JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Prova tu stesso " Disegna una linea
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Prova tu stesso " Disegnare un cerchio
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Prova tu stesso " Disegnare un testo
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Prova tu stesso " corsa di testo
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Prova tu stesso " Disegnare Sfumatura lineare
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Prova tu stesso " Disegnare circolare Gradient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Prova tu stesso " disegnare Immagine
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Prova tu stesso " HTML Canvas Tutorial
Per imparare tutto su HTML <canvas> , Visita la nostra piena HTML Canvas Tutorial .