HTML5 fornisce agli sviluppatori web con le risorse per creare siti web con elementi multimediali interattive. L'elemento canvas HTML5 crea uno spazio rettangolare in cui è possibile usare JavaScript per effettuare le operazioni di disegno, creazione di forme, utilizzando immagini e trasformazioni di elaborazione. pagine Web possono utilizzare l'elemento tela per produrre una vasta gamma di effetti visivi, con il codice in grado di controllare l'area di disegno fino al livello dei singoli pixel.

Elemento

Le pagine Web possono utilizzare gli strumenti di tela, includendo un elemento canvas, come nel seguente codice di esempio markup:

<Canvas id = larghezza "canvasElem" = "400" height = "300"> </ canvas>

Gli attributi di larghezza e altezza determinano le dimensioni dell'elemento tela visibili all'interno della pagina. L'attributo ID consente il codice JavaScript per fare riferimento alla tela. I comandi per il disegno all'interno della tela usano JavaScript, quindi un attributo ID è generalmente necessario per ottenere l'accesso ad esso. L'oggetto di contesto gioca anche un ruolo nella realizzazione di processi di disegno, quindi lo script normalmente accedere ad esso come segue:

var theCanvas = document.getElementById ( "canvasElem");

var cont = theCanvas.getContext ( '2d');

forme

Utilizzando JavaScript, gli sviluppatori possono definire linee, forme e percorsi all'interno di un elemento canvas. Il seguente codice di esempio dimostra tracciando una linea:

cont.beginPath ();

cont.moveTo (50, 100); // x, y

cont.lineTo (150, 200); // x, y

L'oggetto di contesto inizia prima di un percorso, quindi parte da posizioni indicate dalle coordinate passato come parametro alla funzione "moveTo". Da quella posizione, il codice istruisce l'oggetto contesto per disegnare una linea per le coordinate specificato come parametro della funzione "lineTo". JavaScript può anche specificare forme per l'oggetto contesto per disegnare come il seguente esempio:

cont.fillRect (10, 50, 100, 100);

Questo esempio parte da posizione X 10 e la posizione Y 50, disegnando una forma quadrata 100 pixel in tutto.

immagini

Il codice JavaScript all'interno di una pagina può importare immagini esterne in un elemento di tela, o disegnare le immagini da zero. Il seguente codice di esempio mostra la tecnica di base per l'importazione di un'immagine da una posizione specificata:

var = importedImg nuova immagine ();

importedImg.onload = function () {

cont.drawImage (importedImg, 10, 10);

};

importedImg.src = "immagini / imagefile.jpg";

Il codice crea un oggetto immagine, quindi specifica che cosa deve accadere quando la fonte immagine viene caricata in esso. Infine, il codice imposta la fonte "src" dell'immagine per riflettere il percorso e il nome file dell'immagine da importare. La funzione "onload" verrà effettuata quando l'immagine è stata con successo caricato nel browser, in modo che il codice all'interno di esso può istruire il browser per disegnare l'origine dell'immagine all'interno dell'elemento canvas.

Colori

L'oggetto di contesto operativo all'interno di una tela HTML5 può specificare i colori per le linee e le forme così come le ombre e gradienti. Per impostare il colore della linea, JavaScript utilizza la seguente sintassi:

cont.strokeStyle = "# ff0000";

Per impostare lo stile di riempimento per tutte le forme in fase di elaborazione, la seguente sintassi si applica:

cont.fillStyle = "# 0000FF";

Per creare un gradiente, gli sviluppatori possono utilizzare il seguente codice:

var = gradientObject cont.createLinearGradient (50, 50, 200, 200);

gradientObject.addColorStop (0, "# FFFF00");

gradientObject.addColorStop (1, "# 00FFFF");

Questo codice specifica la posizione e le dimensioni del gradiente, poi due valori, che indicano i colori alle estremità della sfumatura.