Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (2/4)
Scritto da Pellegrino Principe il 18-06-2010 ore 10:03
Intel Cluster Studio XE
Nel esempio dell’articolo precedente i metodi fillRect (rettangolo pieno), strokeRect (rettangolo vuoto) e clearRect (rettangolo di cancellazione) hanno la seguente segnatura ...Rect(x, y, width, height) dove i parametri formali x e y indicano le coordinate spaziali di posizionamento, mentre i parametri width ed height indicano larghezza e altezza del rettangolo in pixel. Vediamo, inoltre, che per i rettangoli pieni si può decidere il colore di riempimento con il metodo fillStyle, mentre per i rettangoli vuoti il colore del bordo si sceglie con il metodo strokeStyle.

Entrambi i metodi consentono di scegliere il colore indicandolo secondo le specifiche CSS 3:
  • scrivendo il colore letteralmente come ad esempio “red” o “yellow”;
  • scrivendo i codici dei color: red, green e blue in esadecimale con la notazione #RGB (come nel nostro caso);
  • utilizzando la funzione rgba(R, G, B, A), che tiene conto anche della trasparenza;
  • utilizzando la funzione hsla(H, S, L, A), che tiene conto dei valori hue, saturation, lightness e trasparenza.
Vediamo, infine, che tramite il metodo lineWidth abbiamo indicato lo spessore della linea (4 unità) che andrà a costituire il perimetro del nostro rettangolo vuoto.

L’oggetto canvas consente di disegnare direttamente solo una forma geometrica: il rettangolo. Per le altre forme geometriche abbiamo bisogno di utilizzare un procedimento, che passa attraverso la scrittura di un percorso (path) di disegno, all’interno del quale utilizzeremo delle primitive grafiche la cui connessione consentirà di ottenere delle figure di disegno completamente personalizzate. Il seguente snippet di codice disegna due triangoli di cui uno solido di colore rosso e l’altro vuoto con i bordi gialli:
  1. context.beginPath();
  2. context.moveTo(300, 150);
  3. context.lineTo(450, 250);
  4. context.lineTo(150, 250);
  5. context.fillStyle = "#FF0000";
  6. context.fill();
  7.  
  8. context.beginPath();
  9. context.moveTo(300, 150);
  10. context.lineTo(450, 50);
  11. context.lineTo(150, 50);
  12. context.closePath();
  13. context.strokeStyle = "#FFFF00";
  14. context.stroke();
Il risultato è visibile dalla seguente immagine:

4710717403_fbeba7b942_b.jpg

Dalla disamina del codice vediamo subito che la definizione di un path inizia scrivendo l’istruzione beginPath e poi le istruzioni che si devono eseguire nel suo ambito. Nel primo path disegniamo il triangolo rosso effettuando i seguenti passi:
  • ci spostiamo in un nuovo punto di origine (300 pixel a destra e 150 pixel in basso) con l’istruzione moveTo;
  • disegniamo una linea, che parte dal precedente punto di origine, e va fino a 450 pixel a destra e 250 pixel in basso;
  • disegniamo una seconda linea, che parte dal punto di arrivo della precedente linea, e va fino a 150 pixel a destra, rimandendo ferma sull’asse delle y;
  • impostiamo con fillStyle il colore rosso per il riempimento del triangolo;
  • invochiamo il metodo fill, che disegna effettivamente sul canvas il triangolo, provvedendo a tracciare automaticamente l’ultima linea fino al punto di origine.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Creare un Data Access Layer per SQL Server
Successiva: Possibili applicazioni dei transistor nella regione sottosoglia (1/2)
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.271 secondi.