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

Elemento

Pagine Web è possibile utilizzare gli strumenti di tela includendo un elemento canvas come il seguente codice di esempio:

< tela id = "canvasElem" width = "400" height = "300" >< / tela >

Gli attributi width e height determinano le dimensioni dell'elemento canvas visibile all'interno della pagina. L'attributo ID permette di codice JavaScript per riferirsi alla tela. I comandi per il disegno nell'area di disegno utilizzano JavaScript, quindi un attributo ID è generalmente necessario al fine di ottenere l'accesso ad esso. L'oggetto di contesto inoltre svolge un ruolo nello svolgimento dei processi, di disegno, quindi lo script sarà normalmente accedere a esso come segue:

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

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

Forme

Utilizzando JavaScript, gli sviluppatori possono definire linee, forme e tracciati all'interno di un elemento canvas. Nell'esempio di codice riportato di seguito viene illustrato tracciando una linea:

cont.beginPath();

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

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

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

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

Questo esempio inizia da X posizione 10 e posizione Y 50, disegna un quadrato forma 100 pixel in orizzontale.

Immagini

Codice JavaScript all'interno di una pagina può importare immagini esterne in un elemento canvas, o disegnare immagini da zero. Nell'esempio di codice riportato di seguito viene illustrata la tecnica di base per l'importazione di un'immagine da una posizione specificata:

var importedImg = new Image;

importedImg.onload = function () {

cont.drawImage (importedImg, 10, 10);

};

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

Il codice crea un oggetto image, quindi specifica cosa deve accadere quando l'origine dell'immagine viene caricato in esso. Infine, il codice imposta l'origine di "src" dell'immagine in modo da riflettere il percorso e il nome dell'immagine da importare. La funzione di "onload" avverrà quando l'immagine è stato caricato correttamente nel browser, quindi il codice all'interno di esso può indicare al browser per disegnare l'origine dell'immagine all'interno dell'elemento canvas.

Colori

L'oggetto di contesto operano all'interno di un canvas di HTML5 può specificare i colori per linee e forme così come ombre e sfumature. 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 corso di elaborazione, si applica la seguente sintassi:

cont.fillStyle = "#0000FF";

Per creare una sfumatura, gli sviluppatori possono utilizzare il codice riportato di seguito:

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

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

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

Questo codice specifica la posizione e le dimensioni dell'area della sfumatura, quindi due valori, che indicano i colori alle due estremità della sfumatura.