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
Greenpeace
Guida ad HTML5: l’elemento canvas, immagini e testo (2/4)
Scritto da Pellegrino Principe il 02-07-2010 ore 09:53
Intel Cluster Studio XE
Dall’analisi dello snippet di codice dell’articolo precedente, vediamo le operazioni che dobbiamo compiere per disegnare le immagini sul canvas:
  • verifichiamo che oltre a esistere il contesto grafico, lo stesso abbia un’implementazione della funzione drawImage;
  • istanziamo un oggetto di tipo Image e gli assegniamo un listener per l’evento load, in modo che quando il browser lo ha completamente scaricato e caricato lo utilizziamo per l’esecuzione delle funzioni di disegno;
  • disegniamo l’immagine alle coordinate [0,0] sull’asse delle x e sull’asse delle y, ponendola precisamente nell’angolo sinistro e superiore del canvas;
  • disegniamo una parte dell’immagine effettuando un clipping di un’area alle coordinate x=90, y=91 e con una larghezza di 96 pixel e un’altezza di 103 pixel. La posizioniamo poi sull’asse delle x a un valore che è il calcolo della sua larghezza più 15 pixel, e sull’asse delle y a 10 pixel dal bordo superiore del canvas. Impostiamo, infine, la quantità di ridimensionamento, che nel nostro caso è uguale alle dimensioni dell’area di clipping;
  • disegniamo la stessa immagine a una posizione sull’asse delle x che è la stessa della precedente immagine, e sull’asse delle y a 136 pixel dall’alto rispetto al bordo superiore del canvas. Impostiamo, infine, le dimensioni di scaling in larghezza e altezza in modo che l’immagine risulti scalata del 50%.
L’effetto delle suddette operazioni è mostrato dalla seguente immagine:

4754500534_21229a791f_z.jpg

Prima dell’esecuzione dello snippet di codice mi preme ricordare che Internet Explorer, fino alla versione 8 (la versione 9 dovrebbe aver colmato questa importante lacuna), ha una gestione degli eventi differente da quella illustrata (che è uno standard del W3C) e pertanto il codice degli esempi non verrebbe eseguito.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: HMPP come nuovo standard aperto per la programmazione GPGPU
Successiva: Tiny Tiny RSS, un feed aggregator che rispetta la privacy
Intervento di Cesare Di Mauro a.k.a. cdimauro del 05-07-2010 ore 08:58, San gregorio di catania (CT)
Marchese
Marchese
(910 interventi)
Iscritto il 22-05-2008
Un tempo si usava questa immagine per fare dei test.

I gusti cambiano (sensibilmente), e i giovani d'oggi preferiscono altro, a quanto vedo... :D
Segnala un abuso
Rispondi
Intervento di Pellegrino Principe a.k.a. thp1972 del 05-07-2010 ore 10:09, Guidonia montecelio (RM)
Plebeo
Plebeo
(18 interventi)
Iscritto il 27-09-2008
cdimauro ha scritto:
Un tempo si usava questa immagine per fare dei test.

I gusti cambiano (sensibilmente), e i giovani d'oggi preferiscono altro, a quanto vedo... :D

... beh anche lui è moro ... o forse gli uomini preferiscono le bionde??? :)
Segnala un abuso
Rispondi
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.216 secondi.