Guida introduttiva: Disegno in un elemento Canvas (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 ]

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.

Questa guida introduttiva contiene le sezioni seguenti:

• Prerequisiti
• Elemento Canvas
• Contesti di rendering
• Disegno di rettangoli
• Uso di tracciati
• Disegno di archi
• Disegno di curve
• Curva quadratica
• Curva cubica di Bézier
• Passaggi successivi

Prerequisiti

Questo argomento presuppone che tu sia in grado di creare una semplice app di Windows Store con JavaScript che utilizza il modello della Libreria Windows per JavaScript e che tu abbia conoscenze di base di HTML e JavaScript. Per istruzioni sulla creazione della tua prima app di Windows Store in JavaScript, vedi Creazione della prima app Web. Per istruzioni sull'uso del modello WinJS, vedi Come ottenere e usare il toolkit WinJS.

Elemento Canvas

L'elemento Canvas crea un'area di disegno bitmap rettangolare in cui è possibile usare JavaScript per eseguire il rendering di immagini grafiche al momento.

L'elemento Canvas è dotato di attributi di larghezza e altezza. Entrambi sono facoltativi e possono essere impostati usando le proprietà DOM (Document Object Model). Se non imposti gli attributi di larghezza e altezza, l'area di disegno assumerà le dimensioni predefinite, ovvero 300 pixel di larghezza e 150 pixel di altezza.

<canvas id="canvas" width="150" height="150"></canvas>

L'attributo id non fa parte dell'elemento Canvas ma viene usato per identificarlo nello script.

Puoi impostare la dimensione dell'area di disegno usando i fogli di stile CSS (Cascading Style Sheet). Per impostazione predefinita, l'app esegue il rendering dell'elemento Canvas senza contenuto o bordi: sarà completamente trasparente. Tuttavia, puoi modificarla esattamente come un'immagine normale, specificando margini, bordi, sfondo e così via. La modifica dello stile non influisce sul disegno effettivo nell'area di disegno.

Contesti di rendering

L'aggiunta di un elemento Canvas all'app crea semplicemente un'area di disegno trasparente. Per disegnare nell'area di disegno, devi ottenere un contesto di rendering dall'area di disegno e usarlo per disegnare. Sono disponibili diversi tipi di contesti di rendering che ti consentono di disegnare in modi diversi. Ad esempio, è disponibile un contesto 2-D per la grafica 2D e un contesto 3-D per la grafica 3D. Per gli esempi mostrati in questo argomento viene usato il contesto di rendering 2-D.

Per ottenere un contesto di rendering, devi chiamare il metodo getContext dell'area di disegno, come mostrato nell'esempio seguente:

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

In questo esempio, iniziamo usando il metodo getElementById per recuperare il nodo DOM dell'area di disegno, quindi usiamo il metodo getContext per accedere al contesto di rendering. Il metodo getContent accetta un parametro, il tipo di contesto. In questo esempio è '2d'.

Dopo aver ottenuto un contesto di rendering, puoi usarlo per disegnare. Nelle sezioni seguenti viene descritto come disegnare diversi tipi di forme.

Disegno di rettangoli

Esistono due funzioni che puoi usare per disegnare rettangoli nell'area di disegno:

• fillRect

  fillRect (x, y, width, height)

  Il metodo disegna un rettangolo pieno.

  I parametri x, y sono coordinate che posizionano il rettangolo nell'area di disegno e sono relativi all'angolo superiore sinistro dell'area di disegno. La larghezza e l'altezza sono misurate in pixel.

• strokeRect

  strokeRect(x, y, width, height)

  I parametri strokeRect sono uguali a quelli per fillRect. La differenza è data dal fatto che strokeRect disegna solo il contorno di un rettangolo.

Questo metodo colora una forma specificata:

• fillStyle

  fillStyle = color

  Il metodo fillStyle usa un solo parametro per riempire una forma con un colore. È possibile impostare il colore usando RGB, un colore predefinito, ad esempio "rosso", "blu" e così via, un colore esadecimale o anche una sfumatura. Per esempi di fillStyle, vedi l'esempio Disegno di rettangoli di seguito.

Questo metodo cancella l'area specificata e la rende completamente trasparente:

• clearRect

  clearRect(x, y, width, height)

  Come con i metodi fillRect e strokeRect, i parametri clearRect x e y posizionano l'area rettangolare da cancellare e impostano la larghezza e l'altezza del rettangolo.

Esempio

Iniziamo con un esempio che ci permetterà di creare un'area di disegno in cui verranno disegnati due quadrati pieni, un quadrato dorato e un quadrato viola trasparente. Per creare un bordo nero intorno all'area di disegno verranno usati i fogli di stile CSS:

L'esempio inizia con la dichiarazione di un elemento Canvas nella sezione <body> del codice HTML. All'elemento Canvas viene assegnato un attributo id denominato %%anp;quot;canvas%%anp;quot; e gli attributi di altezza e larghezza dell'elemento sono impostati su 100 pixel:

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

Viene creato l'elemento Canvas con un bordo nero a tinta unita della larghezza di un pixel usando un foglio di stile CSS. Il foglio di stile CSS deve essere contenuto in un file esterno per garantire la massima efficienza per il caricamento del file:

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Anche il codice JavaScript con cui vengono disegnati i due rettangoli pieni nell'area di disegno è contenuto in un file esterno. Inizia al termine del caricamento del documento HTML usando il gestore evento window onload per chiamare la funzione di disegno.

window.onload = draw;

Il metodo di disegno recupera l'elemento Canvas con il metodo getElementById. Chiama quindi il metodo getContext per ottenere il contesto di disegno. È necessario passare la stringa %%anp;quot;2d%%anp;quot; al metodo getContext.

Ogni area di disegno ha un contesto di disegno. Il contesto di disegno consente di definire tutti i metodi e le proprietà di disegno.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Per iniziare a disegnare il primo quadrato, fillStyle viene impostato su un colore. Esistono diversi modi per riempire un rettangolo. In questo esempio, useremo l'equivalente RGB dell'oro:

context.fillStyle = "rgb(255, 215, 0)";

Ecco alcuni modi alternativi per impostare fillStyle.

• Se sono disponibili, puoi usare colori predefiniti, ad esempio "yellow", "orange", "purple" e così via:

  context.fillStyle = "gold";

• In alternativa, usa la rappresentazione esadecimale del formato colore #RRGGBB:

  context.fillStyle = "#FFD700";

  Questo numero esadecimale è un colore oro scuro.

• Anche se non è ritenuta un colore, puoi usare una sfumatura per fillStyle:

  var myGradient=context.createLinearGradient(20, 20, 100, 0);
  
  myGradient.addColorStop(0,"goldenrod");
  myGradient.addColorStop(1,"white");
  
  context.fillStyle = myGradient;
  

  Questo esempio crea una sfumatura lineare, imposta i color stop e fa sì che il rettangolo venga disegnato con la dissolvenza dal dorato al bianco.

  

• Il riempimento fillStyle predefinito è nero a tinta unita.

Successivamente, disegneremo effettivamente il rettangolo usando il metodo fillRect. I valori fillRect iniziano a disegnare un rettangolo pieno impostando le coordinate x e y per l'angolo superiore sinistro del rettangolo su 15, 15. Le coordinate x e y sono relative all'angolo superiore sinistro dell'area di disegno. La larghezza e l'altezza del rettangolo sono impostate rispettivamente su 55 e 50 pixel:

context.fillRect (15, 15, 55, 50);

Per il secondo rettangolo, fillStyle è impostato sull'equivalente RGB del viola. Il quarto valore, ovvero A o Alfa in RGBA, è impostato su 0.5 e determina l'opacità del colore. I valori alfa validi sono compresi tra 0.0 (completamente trasparente) e 1.0 (completamente opaco):

context.fillStyle = "rgba(0, 0, 200, 0.5)"

I valori fillRect iniziano a disegnare in corrispondenza delle coordinate x e y per l'angolo superiore sinistro del rettangolo su 40, 40. La larghezza e l'altezza del rettangolo sono impostate rispettivamente su 45 e 40 pixel:

context.fillRect (40, 40, 45, 40);

Ecco gli esempi di codice completi:

Questo è il codice JavaScript. Nel nostro esempio questo file sarebbe denominato myJavascript.js:

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Questo è il file HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js" defer="defer"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="100" height="100" />
    </body>
</html>

Uso di tracciati

Il metodo beginPath inizia un nuovo tracciato e usa altri metodi, ad esempio moveTo, lineTo o arc per disegnare una combinazione di linee, curve e altre forme.

Dopo aver creato un tracciato, puoi usare i metodi fillStyle o strokeStyle per eseguire il rendering del tracciato nell'area di disegno.

Esempio

In questo esempio verrà disegnato un triangolo marrone:

Utilizzeremo i file HTML e i file dei fogli di stile CSS già usati per il primo esempio. Nel file JavaScript myJavascript useremo la stessa funzione di disegno e la chiameremo al termine del caricamento dell'HTML.

Dopo aver ottenuto l'elemento Canvas e aver specificato un tipo di area di disegno 2-D, inizieremo a disegnare il triangolo marrone chiamando il metodo beginPath.

context.beginPath();

Internamente, i tracciati vengono archiviati come un elenco di tracciati secondari (linee, archi e così via) che combinati insieme costituiscono una forma. Ogni volta che viene chiamato il metodo beginPath l'elenco viene reimpostato ed è possibile iniziare a disegnare nuove forme.

Prima di iniziare a disegnare le linee, devi chiamare la funzione moveTo. La funzione moveTo non disegna nulla: è come posizionare una penna o una matita sul punto in cui desideri iniziare a disegnare il triangolo.

context.moveTo(28, 20);

moveTo accetta due argomenti, le coordinate x e y. In questo caso, abbiamo impostato la coordinata x su 28 e la coordinata y su 20. Le coordinate sono relative al bordo dell'area di disegno in cui stai disegnando.

Ora disegneremo le linee del triangolo usando la funzione lineTo. Come la funzione moveTo, la funzione lineTo ha due argomenti, le coordinate x e y, che rappresentano i punti finali della linea che stiamo disegnando:

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20); 

Nell'esempio impostiamo la proprietà fillStyle su un valore esadecimale corrispondente al marrone. Come descritto nella sezione Disegno di rettangoli, la proprietà fillStyle può essere un valore RGB, un colore esadecimale, un colore predefinito o una sfumatura.

context.fillStyle = "#996633";

Per colorare il triangolo con il colore marrone a tinta unita, usiamo fillStyle. Per colorare solo il contorno della forma, avremmo dovuto usare la funzione strokeStyle.

Ora, disegneremo la forma del triangolo.

context.fill();

Questo è il codice JavaScript completo:

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();  

Disegno di archi

Per disegnare archi o cerchi, dobbiamo usare il metodo arc:

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

Il metodo accetta cinque parametri.

• X e y sono le coordinate del centro del cerchio.
• Il raggio è la distanza dal centro del cerchio a un punto del cerchio.
• I parametri startingAngle ed endingAngle definiscono i punti di inizio e di fine dell'arco in radianti, misurate dall'asse x.
• Il parametro antiorario è un valore booleano che se è true disegna l'arco in senso antiorario, in caso contrario in senso orario.

Esempio

In questo esempio verrà disegnato un cerchio blu.

Dopo aver ottenuto l'elemento Canvas e aver specificato un tipo di area di disegno 2-D, inizieremo a disegnare il cerchio blu chiamando il metodo beginPath.

context.beginPath();

Negli esempi precedenti relativi al rettangolo e al triangolo abbiamo usato la funzione fillStyle per riempire e colorare le forme. In questo esempio imposteremo il colore RGB su blu e disegneremo solo il contorno del cerchio usando la funzione strokeStyle.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

La funzione Arc è definita nel modo seguente:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

dove:

• Le coordinate x e y posizionano il centro del cerchio in corrispondenza di 50, 50, rispettivamente.
• Il raggio del cerchio è impostato su 32.
• L'inizio e la fine del cerchio sono impostati su 0 e "2 * Math.PI" radianti, ovvero un cerchio completo.
• Il parametro antiorario è impostato su true, un aspetto non importante quando si disegna un cerchio completo, ma molto importante per parte di un arco.

Viene infine usata la funzione stroke per disegnare il cerchio che abbiamo appena definito.

// draw the circle.
context.stroke();

Ecco l'aspetto che assumerebbe il nostro cerchio se avessimo disegnato solo ½ dell'arco o da zero a Math.PI:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Questo è il codice JavaScript. Di nuovo, questo codice sarebbe contenuto in una funzione di disegno chiamata al termine del caricamento della pagina HTML. Per l'esempio completo dei file HTML o JavaScript, vedi la sezione Disegno di rettangoli.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Disegno di curve

Le curve vengono usate per disegnare forme complesse. Esistono due tipi di curve: curva di Bézier o cubica e quadratic. Entrambe hanno un punto di inizio e di fine nell'area di disegno, tuttavia, il modo in cui viene disegnata la curva si basa su uno o più punti di controllo. La curva quadratic ha un punto di controllo, mentre la curva di Bézier cubica ne ha due. Le curve sono sempre contenute in un tracciato.

Curva quadratica

Ecco il metodo quadraticCurveTo:

quadraticCurveTo(cp1x, cp1y, X, Y)

I quattro parametri sono due coppie di coordinate X e Y. La prima, cp1x e cp1y, rappresenta la posizione del punto di controllo sulla curva e la seconda la posizione della fine della curva.

Analogamente alle altre forme, la curva ha inizio con un metodo moveTo(x, y) che fornisce le coordinate x e y per l'inizio della curva.

Vengono disegnate due linee tangenziali immaginarie dai punti finali al punto di controllo. La curva viene disegnata da una linea man mano che si sposta intorno alla tangenziale:

Esempio

In questo esempio viene usata una serie di metodi quadraticCurveTo per disegnare una figura astratta con una base ondulata. Noterai che più vicini sono i punti di controllo al punto finale, più piccola diventerà la curva nella base ondulata.

Iniziamo con l'ottenere l'elemento Canvas e specificando un tipo di area di disegno 2-D. Creiamo quindi il tracciato chiamando il metodo beginPath.

context.beginPath();

Impostiamo il punto iniziale per la prima curva alle coordinate x e y, rispettivamente su 75 e 25.

context.moveTo(75, 25);

Ogni curva quadratic è impostata nel modo seguente:

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Dove ogni parametro è:

• cp1x
  Coordinata x del punto di controllo.

• cp1y
  Coordinata y del punto di controllo.

• x
  Coordinata x del punto finale della curva.

• y
  Coordinata y del punto finale della curva.

Nota che l'ordine in cui vengono disegnate le curve è importante. Puoi rimuovere una o due curve o modificare l'ordine in cui vengono disegnate per vedere in che modo sono costruite le curve.

È stato definito il colore verde impostando fillStyle sui valori RGB per il verde.

context.fillStyle = "rgb(100, 200, 50)";

Infine, la forma viene colorata con la funzione fill:

context.fill();

Tieni presente che per questo esempio e per quello successivo, la dimensione dell'area di disegno è stata aumentata a 150 per 150 pixel:

<canvas id="canvas" width="150" height="150" />

Ecco l'esempio completo:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

Curva cubica di Bézier

Ecco il metodo bezierCurveTo:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

I sei parametri sono tre coppie di coordinate X e Y. La coppia cp1x e cp1y rappresenta la posizione del primo punto di controllo sulla curva, la coppia cp2x e cp2y rappresenta la posizione del secondo punto di controllo e la terza coppia la posizione della fine della curva.

La curva inizia alle coordinate x e y nel metodo the moveTo(x, y.

Vengono disegnate due linee tangenziali immaginarie dai punti di controllo ai punti finali. La curva è disegnata mediante una linea man mano che si sposta intorno alle linee tangenziali come illustrato dalle linee viola nella figura:

Esempio

In questo esempio viene usata una serie di metodi bezierCurveTo per disegnare una figura astratta con una base ondulata.

Dopo aver ottenuto l'elemento Canvas e aver specificato un tipo di area di disegno 2-D, creiamo il tracciato chiamando il metodo beginPath.

context.beginPath();

Impostiamo il punto iniziale per la prima curva alle coordinate x e y, rispettivamente su 75 e 25.

context.moveTo(75, 25);

Ogni curva di Bézier cubica è impostata nel modo seguente:

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Dove ogni parametro è:

• cp1x
  Coordinata x del primo punto di controllo della curva di Bézier.

• cp1y
  Coordinata y del primo punto di controllo della curva di Bézier.

• cp2x
  Coordinata x del secondo punto di controllo della curva di Bézier.

• cp2y
  Coordinata y del secondo punto di controllo della curva di Bézier.

• x
  Coordinata x del punto finale della curva.

• y
  Coordinata y del punto finale della curva.

Nota che l'ordine in cui vengono disegnate le curve è importante. Puoi rimuovere una o due curve o modificare l'ordine in cui vengono disegnate per vedere in che modo sono costruite le curve.

È stato definito il colore rosso impostando fillStyle sui valori RGB per il rosso.

context.fillStyle = "rgb(200, 0, 0)";

Infine, la forma viene colorata con la funzione Fill:

context.fill();

Tieni presente che per questo esempio la dimensione dell'area di disegno è stata aumentata a 150 per 150 pixel:

<canvas id="canvas" width="150" height="150" />

Ecco l'esempio di codice completo:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Passaggi successivi

In questa guida introduttiva abbiamo aggiunto un elemento Canvas per creare una superficie di disegno trasparente, creato un bordo intorno ad essa usando i fogli di stile CSS e usato JavaScript per disegnare immagini grafiche su di essa.

Abbiamo ottenuto un contesto di disegno 2-D dall'elemento Canvas in modo da impostare i metodi fillRect e fillStyle per disegnare i rettangoli. Abbiamo impostato fillStyle per colorare la grafica in diversi modi, usando i colori RGB, i valori esadecimali, i colori predefiniti e una sfumatura.

Abbiamo visto in che modo il metodo beginPath inizia un nuovo tracciato e usa altri metodi, ad esempio moveTo, lineTo o arc, per disegnare una combinazione di linee, cerchi e curve.

Dopo aver creato il tracciato, abbiamo usato i metodi fillStyle e strokeStyle per eseguire il rendering del tracciato nell'area di disegno.

Successivamente apprenderai come animare gli elementi grafici dell'area di disegno e come creare una sfumatura.

Come animare gli elementi grafici dell'area di disegno

Come creare una sfumatura