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 (1/4)
Scritto da Pellegrino Principe il 14-06-2010 ore 08:50
Intel Cluster Studio XE
Il listato scritto nel precedente articolo ottiene dal DOM l’elemento con ID tela, che rappresenta il nostro oggetto canvas e verifica la sua esistenza e il supporto da parte del browser correntemente in uso. Se la verifica ha avuto esisto positivo allora si invoca sull’oggetto canvas il metodo getContext con argomento “2d”, che consente di ottenere il contesto grafico sul quale effettuare le operazioni di disegno. Per ora, non è possibile, in modo standard, passare come argomento la stringa “3d”, in quanto un contesto di disegno per un rendering a tre dimensioni non è ancora, ufficialmente, supportato.

Esiste tuttavia una specifica, denominata WebGL, che ha lo scopo di fornire un'API 3D a basso livello, basata sulle API OpenGL ES 2.0, utilizzabile attraverso il tag canvas di HTML5: essa è in corso di sviluppo da parte del gruppo WebGL — composto da Mozilla, Google, Apple e Opera Foundation — in seno a un consorzio, cui fanno parte aziende del calibro di AMD, Samsung, Intel, IBM, ecc., denominato Khronos Group.

Quest'ultimo intende sviluppare standard aperti e royalty-free di tecnologie che consentano lo sviluppo di applicazioni, che fanno un uso predominante di grafica, video, immagini, audio e computazione parallela. Tra gli standard sviluppati da questo gruppo ricordiamo: OpenGL, OpenCL, OpenGL ES (API per la grafica 2D e 3D per i sistemi embedded come cellulari, console, ecc.) e OpenML (API per la gestione dei media digitali).

Dopo questa breve digressione sul Web 3D, ritorniamo al disegno di elementi grafici in un contesto 2D, esaminando il seguente snippet di codice, che crea un rettangolo riempito di colore rosso, un rettangolo vuoto con i bordi gialli e un rettangolo di cancellazione:

4699122436_91a0e00e33_b.jpg

  1. context.fillStyle = "#FF0000";
  2. context.fillRect(0, 0, 250, 50);
  3.  
  4. context.lineWidth = 4;
  5. context.strokeStyle = "#FFFF00";
  6. context.strokeRect(0, 60, 250, 100);
  7.  
  8. context.clearRect(5, 5, 80, 10);
Quando si disegna in un canvas bisogna riferirsi a un sistema di coordinate spaziali immaginando una griglia (un piano) dove il valore della coordinata x si riferisce al suo angolo sinistro e il valore della coordinata y si riferisce al suo angolo superiore. Inoltre, gli incrementi positivi della coordinata x causano spostamenti verso la destra del piano mentre incrementi positivi della coordinata y causano spostamenti verso il basso del medesimo piano.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Passato, presente e futuro del file system Be (2/3)
Successiva: HP annuncia interazione diretta tra stampanti e smartphone
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.261 secondi.