HTML5 canvas: come disegnare in HTML5 – Seconda Parte

HTML5 canvas: come disegnare in HTML5 – Seconda Parte

In questo articolo continuiamo il nostro studio sulle funzionalità offerte dal tag di HTML5. Vediamo come poter scrivere del testo all'interno del canvas creata nell'articolo precedente utilizzando il context inizializzato tramite la chiamata alla funzione getContext("2d"):

HTML5: il nuovo standard per il linguaggio HTML
HTML5 canvas: come disegnare in HTML5 – Prima Parte
HTML5 Forms: i nuovi attributi dell’input element

In questo articolo continuiamo il nostro studio sulle funzionalità offerte dal tag <canvas> di HTML5.

Vediamo come poter scrivere del testo all’interno del canvas creata nell’articolo precedente utilizzando il context inizializzato tramite la chiamata alla funzione getContext(“2d”):

canv_context.font = "bold 12px sans-serif";
canv_context.fillText("Ciao Mondo", 100, 100);

con l’attributo font settiamo ovviamente il font, la dimensione e lo stile del nostro font, mentre con fillText() scriviamo il vero e proprio testo alle coordinate [100,100].  Sono presenti poi altri due attributi:

  • textAlign: controlla l’allineamento del testo, in maniera similare ma non identica alla regola text-align di CSS; i valori possibili sono: start, end, left, right o center;
  • textBaseline: controlla dove il testo sarà posizionato relativamente al punto iniziale; il punto iniziale è la coordinata che abbiamo passto col metodo fillContext(), i valori possibili sono top, hanging, middle, alphabetic, ideographic, o bottom.

I vari tipi di textBaseline sono riferiti a questa figura:

I punti di allineamento del testo

Di conseguenza se voglio che l’allineamento “top” del mio testo sia alla coordinata y=10 e l’allineamento “left” sia alla coordinata x=10 dovrò scrivere questo codice:

context.textAlign = "left";
context.textBaseline = "top";
context.fillText("Ciao Mondo", 10, 10);

In altre parole ho ottenuto che l’angolo in alto a sinistra del mio testo venga disegnato a partire dalla coordinata [10,10].

Il contesto del canvas definisce inoltre dei metodi per disegnare delle immagini:

  • drawImage(image, dx, dy): disegna una immagine con l’angolo sinistro in alto a partire dalla coordinata [dx, dy];
  • drawImage(image, dx, dy, dw, dh): disegna una immagine con l’angolo sinistro in alto a partire dalla coordinata [dx, dy] e la scala con larghezza dw e altezza dh;
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): prende una immagine la ritaglia con le dimensioni [dx, dy, dw e dh], la disegna con l’angolo sinistro in alto a partire dalla coordinata [dx, dy] e la scala con larghezza dw e altezza dh;

Questi parametri sono riassunti in questa figura:

I parametri del metodo drawImage()

Ci sono essenzialmente due metodi per poter disegnare una figura in un canvas; il primo è quello di avere già una immagine in un tag <img> e riutilizzarla nel tag <canvas>:

<img id="logoId" src="images/logo-appuntisoftware.png" alt="logo appuntisoftware" width="500" height="225">
<canvas id="canvId" width="500" height="225">
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvId");
var context = canvas.getContext("2d");
var logo= document.getElementById("logoId");
context.drawImage(logo, 0, 0); };
</script>

In questo modo avremo due immagini una nel tag img l’altra nel canvas. Un metodo alternativo è quello di fare tutto in JavaScript:

<canvas id="canvId" width="500" height="225"></canvas>
<script>
var canv = document.getElementById("canvId");
var canv_context = canv.getContext("2d");
var logo= new Image();
logo.src = "images/logo-appuntisoftware.png";
logo.onload = function() {
canv_context.drawImage(logo, 0, 0); };
</script>

Un’altra possibilità offerta dal tag <canvas> è quella di utilizzare dei gradienti per il riempimento di colore di una figura.

Ci sono due metodi per creare un gradiente:

  • createLinearGradient(x0, y0, x1, y1): crea un gradiente lungo la linea che va da [x0,y0] fino a [x1,y1];
  • createRadialGradient(x0, y0, r0, x1, y1, r1): crea un gradiente lungo un cono che ha come cerchio iniziale quello con centro [x0, y0] e raggio r0 e cerchio finale quello con centro [x1, y1] e raggio r1.

Nel codice seguente vediamo come creare un gradiente lineare (con verso da sinistra verso destra), che va dal nero al bianco:

var linearGradient= context.createLinearGradient(0, 0, 0, 225);
linearGradient.addColorStop(0, "black");
linearGradient.addColorStop(1, "white");
canv_context.fillStyle = linearGradient;
canv_context.fillRect(0, 0, 300, 225);

In questo altro esempio vediamo come creare un gradiente radiale:

var radialGradient=canv_context.createRadialGradient(100, 100, 0, 100, 100, 100);
radialGradient.addColorStop(0, "black");
radialGradient.addColorStop(1, "white");
canv_context.fillStyle=radialGradient;
canv_context.fillRect(0,0,300,225);

Otteniamo il risultato in figura:

Un esempio di gradiente radiale

Come abbiamo detto nel precedente articolo, Internet Explorer non supporta il tag <canvas>, per poter sopperire a questa mancanza è stata sviluppata una libreria JavaScript open-source che permette di emulare il comportamento del tag <canvas> all’interno di IE, anche se non tutte le feature sono supportate (ad esempio i gradienti radiali non lo sono). Questa libreria si chiama excanvas.js ed è un progetto ospitato su Google Code dal nome ExplorerCanvas,  possiamo reperirla al sito http://code.google.com/p/explorercanvas/.

Per poter abilitare IE al supporto del canvas la inseriamo all’interno della nostra pagina web in questo modo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
<!--[if IE]>
<script src="excanvas.js">
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>

COMMENTS

WORDPRESS: 3
  • comment-avatar
    alessandto 13 anni ago

    è possibile cancellare un immagine in un canvas per rilasciare memoria?
    mi spiego meglio devo fare un sito che aggiorna continuamente un immagine, però dopo poco a forza di disegnare la memoria utilizzata è tanta, volevo sapere se era possibile rilasciare questa memoria.

    • comment-avatar

      ciao, per cancellare una immagine basta reimpostarne le dimensioni se leggi l’articolo precedente (prima puntata) trovi la procedura (ad esempio canv.width = canv.width;).
      Il meccanismo di garbage collection è automatico in ogni caso prova ad impostare a null l’immagine per evocare manualmente il garbage collector; spero che ciò ti sia di aiuto!

      • comment-avatar
        alessandto 13 anni ago

        Grazie mille per la risposta, effettivamente cancella l’immagine, però il problema è sempre che non rilascia la memoria, questo è all’incirca il mio codice:

        Canvas test

        var canvas = document.getElementById(‘esempio’);
        var ctx = canvas.getContext(‘2d’);
        setInterval(disegna,1000);
        function disegna() {
        img = new Image();
        img.onload = function(){
        ctx.drawImage(img,0,0,320,240);
        }
        img.src =”http://81.221.123.70/jpg/image.jpg”+ ‘?’ + Math.random();
        }

        ho bisogno che rilasci la memoria perchè questa pagina web dovrebbe essere aperta dal browser di un iPhone, quindi con quel problema dopo pochi minuti crasherebbe.
        Se hai un altro consiglio ti prego di dirmelo.