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, compositing (1/2)
Scritto da Pellegrino Principe il 26-07-2010 ore 12:16
Intel Parallel Studio XE
Le operazioni di disegno effettuate nel contesto grafico sono influenzate dai seguenti attributi globali di compositing appartenenti all'oggetto contesto ritornato dalla funzione getContext:
  • globalAlpha consente di impostare il valore alpha (la trasparenza) per le successive operazioni di rendering dei disegni sull’elemento canvas. I valori accettati vanno da 0.0 (totalmente trasparente) a 1.0 (totalmente opaco). All’atto di creazione del contesto grafico questa proprietà ha 1.0 come valore di default;
  • globalCompositeOperation permette di decidere come verranno disegnate (composte) all’interno del canvas le forme geometriche e le immagini. Di default ogni nuova immagine o forma geometrica verrà disegnata sempre sopra il contenuto del canvas (source-over). Ciò significa che se avremo, ad esempio, un’immagine A di 200x100 pixel posizionata alle coordinate x=10, y=10 e poi un’immagine B sempre di 200x100 pixel posizionata alle stesse coordinate di A, quest’ultima la coprirà completamente.

Quest'ultimo attributo può avere anche i seguenti valori espressi come stringhe:
  • source-in: la nuova immagine sarà disegnata nei punti di sovrapposizione dell’immagine di destinazione rendendone trasparenti i rimanenti pixel;
  • source-out: la nuova immagine sarà disegnata nei punti di non sovrapposizione dell’immagine di destinazione, i cui pixel saranno resi trasparenti;
  • source-atop: la nuova immagine sarà disegnata nei punti di sovrapposizione dell’immagine di destinazione non rendendone trasparenti i rimanenti pixel;
  • lighter: nei punti di sovrapposizione della nuova immagine con l’immagine di destinazione, questo parametro consentirà un cambiamento di colore dato dalla somma dei rispettivi colori dei pixel sovrapposti;
  • xor: i pixel della nuova immagine e quelli dell’immagine di destinazione saranno resi trasparenti laddove si sovrapporranno, mentre i restanti rimarranno invariati;
  • destination-over: la nuova immagine sarà disegnata dietro l’immagine di destinazione;
  • destination-in: i punti di sovrapposizione dell’immagine di destinazione con la nuova immagine saranno preservati, mentre i rimanenti saranno resi trasparenti;
  • destination-out: i punti di non sovrapposizione dell’immagine di destinazione rispetto alla nuova immagine saranno preservati, mentre gli altri saranno resi trasparenti;
  • destination-atop: saranno preservati solo i punti di sovrapposizione dell’immagine di destinazione con quelli della nuova immagine, che sarà disegnata dietro di essa;
  • darker: nei punti di sovrapposizione della nuova immagine con l’immagine di destinazione vi sarà un cambiamento di colore dato dalla sottrazione dei rispettivi colori dei pixel sovrapposti;
  • copy: sarà disegnata solamente la nuova immagine mentre quella di destinazione sarà completamente rimossa.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Mirah: la raffinatezza di Ruby e l'efficienza di Java
Successiva: NetLogic, 32 core in un modulo da 4 chip
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.266 secondi.