Condividi tramite

Come creare una sfumatura (HTML)

  • Articolo

[ 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 ]

Forme e linee non sono realizzabili solo in tinta unita. Una sfumatura nell'area di disegno costituisce effettivamente un tipo di valore colore che puoi applicare alle proprietà fillStyle e strokeStyle.

Si possono usare le sfumature per produrre una modifica direzionale dell'intensità o del colore di un'immagine. Questa possibilità è utile per produrre immagini di sfondo, indicare l'altitudine sulle cartine oppure ovunque si desideri aggiungere luce e ombreggiature a una superficie.

Le sfumature ti aiutano a semplificare le applicazioni Web perché grazie a loro puoi ottenere questi effetti senza usare le immagini e quindi ridurre al minimo la larghezza di banda e il tempo necessari al caricamento. Inoltre, siccome vengono prodotte a livello di programmazione, è facile ridimensionarle e riusarle.

Prerequisiti

In questo argomento si presuppone che tu sia in grado di creare un'app di Windows Store di base usando JavaScript e il modello Libreria Windows per 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.

Istruzioni

Passaggio 1: Recuperare il contesto di rendering

Prima di disegnare un'immagine nell'area di disegno e colorarla con una sfumatura, dobbiamo recuperare il contesto di rendering dall'elemento Canvas. Il contesto di rendering è quello in cui si definiscono tutti i metodi e le proprietà del disegno.

  1. Per migliorare le prestazioni dell'app di Windows Store in JavaScript, aspetta che la pagina HTML sia caricata prima di eseguire il codice JavaScript. A questo scopo, posiziona il codice che disegnerà l'immagine in una funzione che viene chiamata dopo il caricamento della pagina.

    window.onload = drawGradient;   

function drawGradient() {...

  2. Usa getElementById per recuperare il nodo DOM (Document Object Model), quindi usa il metodo getContext per accedere al contesto di rendering.

    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.

        // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

Passaggio 2: Creare la sfumatura

Dopo che abbiamo recuperato il contesto di rendering possiamo definire la sfumatura. Esistono due tipi di sfumatura: lineare, o sfumatura dritta, e radiale, o circolare.

Linear gradient

Il metodo per la sfumatura lineare usa quattro argomenti:

createLinearGradient(startX, startY, endX, endY)

La prima serie di due argomenti è costituita dalle posizioni x e y iniziali della sfumatura, mentre la seconda serie di argomenti dalle posizioni x e y finali.

  • Sfumatura lineare verticale

    In questo esempio il metodo createLinearGradient è assegnato alla variabile myGradient. Ciò risulterà utile nel secondo passaggio, quando aggiungeremo i colori alla sfumatura.

    var myGradient=context.createLinearGradient(0, 0, 200, 0);

    Per creare una sfumatura lineare verticale, dove la sfumatura si estende da un'estremità all'altra, si impostano le posizioni x e y iniziali della sfumatura su 0 e 0, e le posizioni x e y finali su 200 e 0. Dato che i valori y (vale a dire il secondo e il quarto parametro) sono entrambi pari a 0, la sfumatura si estende in modo uniforme da sinistra a destra.

    Una sfumatura verticale

  • Una sfumatura orizzontale

    Per creare una sfumatura che si estende dall'alto in basso, mantieni costanti i valori x (vale a dire il primo e il terzo parametro) e imposta i valori y (secondo e quarto parametro) su 0 e su un valore pari all'altezza dell'area di disegno.

    var myGradient=context.createLinearGradient(0, 0, 0, 100);

    Una sfumatura orizzontale

  • Una sfumatura diagonale

    Puoi anche creare sfumature lungo una diagonale. In questo esempio variano sia i valori x che i valori y, impostati rispettivamente su 200 e 100.

    var myGradient=context.createLinearGradient(0, 0, 200, 100);

    Una sfumatura diagonale

Radial gradient

Il metodo createRadialGradient usa sei argomenti:

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Dove i parametri sono:

  • startX e startY sono le coordinate x e y dell'elemento Canvas del cerchio iniziale.
  • startRadius è il raggio del cerchio iniziale.
  • startX e startY sono le coordinate x e y dell'elemento Canvas del cerchio finale.
  • startRadius è il raggio del cerchio finale.

  • Una sfumatura radiale tradizionale

    Per creare una sfumatura radiale "tradizionale", dove il colore digrada uniformemente da un cerchio all'altro, devi impostare le coordinate x/y di entrambi i cerchi sullo stesso valore e assicurarti che uno dei cerchi sfumati sia più grande dell'altro.

    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    Una sfumatura radiale.

  • Posizioni di inizio e fine diverse

    Nell'esempio di sfumatura radiale illustrato in precedenza, le coordinate x e y sono uguali sia nella posizione iniziale che in quella finale, rispettivamente 52 e 50, e solo le dimensioni del raggio dei singoli cerchi è passato da 10 a 200. In questo modo la sfumatura radiale viene centrata in mezzo al cerchio.

    Separando ulteriormente le posizioni iniziale e finale, otterrai una sfumatura conica che si estende da un'estremità all'altra dell'area di disegno.

    var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);

    In questo esempio le coordinate x e y del cerchio iniziale sono 32 e 30, mentre il raggio è 5. Invece, le coordinate x e y del cerchio finale sono 60 e 60, mentre il raggio è 50. Ecco il risultato:

    Una sfumatura radiale con coordinate x e y diverse.

Passaggio 3: Impostare i color-stop

Una sfumatura ha due o più metodi addColorStop:

addColorStop(offset, color)

Per aggiungere un color-stop devi specificare il colore da applicare e la relativa posizione offset lungo la sfumatura. La sfumatura può avere qualsiasi posizione intermedia compresa tra 0, che è l'inizio della sfumatura, e 1, che è la fine.

Nel nostro esempio la variabile myGradient è usata per impostare il valore di addColorStop da 0 a 1 in modo da creare una sfumatura uniforme che passa dal bianco al nero.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

  • Più color-stop

    Puoi usare più color-stop. In questo esempio, un secondo metodo addColorStop assegna un color-stop a metà della sfumatura:

      myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");

    Produrrà questa sfumatura:

    Una sfumatura verticale multicolore

Passaggio 4: Impostare il tipo di riempimento

Prima di disegnare la sfumatura devi impostare fillStyle su myGradient.

context.fillStyle = myGradient;

Infine, per disegnare l'immagine si usa il metodo fillRect:

context.fillRect(0, 0, 200, 100);

Esempi completi

Sfumatura lineare

Questo codice JavaScript usa un elemento Canvas per disegnare un rettangolo, quindi una sfumatura lineare diagonale per il fillStyle del rettangolo.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

Sfumatura radiale

Questo codice JavaScript usa un elemento Canvas per disegnare un cerchio, quindi una sfumatura radiale per il fillStyle del cerchio.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

Cascading Style Sheets (CSS)

Questo è un esempio di CSS che crea un bordo grigio attorno a un elemento Canvas.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

File HTML

Questo file HTML crea un elemento Canvas che usa file JavaScript e CSS esterni.

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

Argomenti correlati

Guida introduttiva: Disegno in un elemento Canvas

Ottimizzazione delle prestazioni: il codice JavaScript