COLORE

È possibile cambiare il colore della penna e il colore del riempimento da utilizzare mediante i seguenti metodi:

• strokeStyle=”color” assegna alla penna la stringa color che rappresenta un colore in notazione CSS
• fillStyle=”color” assegna il colore di riempimento alla stringa color
• globalAlpha=transparency assegna il livello di trasparenza del colore. Transparency è un numero tra 0.0 (trasparente) e 1.0 (opaco)

Esempio color:

GRADIENTI DI COLORE

createLinearGradient(x1,y1,x2,y2) crea un oggetto gradiente lineare di colore sul segmento che parte nel punto (x1,y1) e termina nel punto (x2,y2)

Posso intenderlo cosi:

gradient.addColorStop(posizione, colore) lungo il segmento dell'oggetto gradient fissa dei colori. Ogni colore ha una posizione (0.0 inizio segmento, 1.0 fine segmento). Il colore è definito mediante una stringa che rappresenta un colore in notazione

CSS.Esempio:lineWidth="valore" per cambiare lo spessore della penna ("Stroke")
• Informatica multimediale – JavaScript e HTML Canvas

DISEGNARE IL TESTO
fillText(text, x,y) disegna il testo nel punto (x,y)
• strokeText(text, x,y) disegna il testo (senza riempire i caratteri con il colore di riempimento) nel
punto (x,y)
font = "valore" valore è una stringa che rappresenta le caratteristiche di un font (dimensione e tipo
• font) mediante la notazione CSS. Es: ctx.font="80px Verdana";
Es:

DISEGNARE IMMAGINI
Per visualizzare delle immagini in un canvas, è necessario:
1. caricare le immagini drawImage
2. visualizzarle mediante il metodo (drawImage ha effetto solo se l'immagine è
stata prima caricata completamente. È dunque necessario essere certi di eseguire drawImage
solo a caricamento effettuato.
drawImage(image,x,y) disegna l'immagine image nel punto (x,y) (tale punto

rappresenta l'angolo• superiore sinistro dell'immagine)drawImage(image,x,y,width, height) disegna l'immagine image nel punto (x,y) (tale punto• rappresenta l'angolo superiore sinistro dell'immagine) e la riscala in modo tale che sia larga width e alta height.

Di DEFAULT le immagini vengono caricate con la loro dimensione originale.

Es: Informatica multimediale – JavaScript e HTML Canvas

IMMAGINI MULTIPLE

Nel caso di dover caricare e visualizzare più di un'immagine, conviene:

1. caricare le immagini come elementi html <img> nascosti usando la proprietà CSS “display” con il valore none
2. selezionare le immagini da caricare usando il metodo document.getElementById(id), dove id rappresenta l'identificatore dell'immagine da selezionare.
3. Disegnare l'immagine selezionata mediante il metodo drawImage

ANIMAZIONI

Useremo i seguenti metodi per creare delle

<code>animazioniwindow.setInterval(disegnaFrame,x) esegue la funzione disegnaFrame ogni x millisecondi</code> <code>window.setTimeout(disegnaFrame,x) esegue la funzione diegnaFrame dopo x millisecondi</code> <code>window.requestAnimationFrame(disegnaFrame) richiede al browser di disegnare il prossimo frame dell'animazione eseguendo la funzione disegnaFrame</code>

STRUTTURA DI UN'ANIMAZIONE

Una possibile struttura di base per generare un'animazione prevede:

• una funzione principale che attiva l'animazione mediante i metodi presentati qui sopra
• una funzione richiamata dalla funzione principale che permette di aggiornare i frame dell'animazione

Es_1:

<code>Es_2: Informatica multimediale - JavaScript e HTML Canvas</code>

GESTIONE DEGLI EVENTI

Il browser una volta caricata una pagina, ciclicamente ripete le seguenti operazioni:

1. Processamento (script/flow);
2. Presentazione dei contenuti (paint);
3. Attesa di nuovi eventi (events)

Ogni evento è caratterizzato da:

Un nome

(Es: click, mouseOver, keyDown, keyUp)

Una struttura dati che descrive la proprietà dell'evento (Es: proprietà relative alle coordinate del puntatore del mouse)

Ogni evento è associato ad un oggetto emittente

Possibili oggetti emittenti:

• Oggetto WINDOW descrive la finestra del browser
• Oggetto DOCUMENT descrive il contenuto della pagina Web
• Elemento HTML per esempio un Canvas, un div, Etc...

ASCOLTATORI

Per gestire un evento è necessario:

1. Definire la funzione chiamata ASCOLTATORE (in inglese: Listener, Handler) la quale:
• Prende in input l'evento da gestire (solo se serve)
• Definisce nel suo corpo l'operatività associata all'intercettazione dell'evento
2. Associare l'ascoltatore con l'oggetto emittente (REGISTERING), attraverso la funzione addEventListener.

Es: (Con un click il titolo "Ciao, mondo!" cambia in "Hello, world!")

Ciao, mondo!

Associazione dell'elemento all'ascoltatore

modifyText che viene eseguito ad ogni click del mouse sull'emittente

Informatica multimediale - JavaScript e HTML Canvas

addEventListener() permette di definire una funzione che verrà chiamata al verificarsi dell'evento specificato, sull'oggetto emittente

Es: target.addEventListener(nomeEvento, ascoltatore, usaCapture)

dove:

TARGET rappresenta l'oggetto emittente

nomeEvento è una stringa che rappresenta il nome dell'evento da gestire

Ascoltatore è la funzione da eseguire al verificarsi dell'evento

è una funzione che viene eseguita al verificarsi dell'evento nomeEvento. UsaCapture è un valore booleano che stabilisce la politica di propagazione degli eventi: false (bubbling), true (capturing). BUBBLING VS CAPTURING Quando più elementi HTML sono associati allo stesso evento è necessario stabilire un ordine di propagazione dell'evento fra i vari elementi. BUBBLING viene gestito prima l'elemento più interno (innermost) e si prosegue verso l'elemento più esterno (outermost). CAPTURING viene gestito prima l'elemento più esterno (outermost) e si prosegue verso l'elemento più interno (innermost). Di DEFAULT, la funzione addEventListener, usa la tecnica del BUBBLING (parametro usaCapture=false). Es BUBBLING: ALCUNI EVENTI DEL MOUSE Click viene segnalato ogni volta che c'è la pressione del tasto principale del mouse su un singolo elemento (tipicamente tasto sx) Dblclickma genera eventi distinti per ogni elemento innestato.mousemove eventevent.target: oggetto che ha generato l'evento• event.type: tipo di evento generato (es. "click", "mousemove", "mouseover", etc.)• event.preventDefault(): metodo che impedisce il comportamento predefinito dell'evento• event.stopPropagation(): metodo che impedisce la propagazione dell'evento agli elementi genitori• event.stopImmediatePropagation(): metodo che impedisce la propagazione dell'evento agli elementi genitori e agli altri eventi dello stesso tipo• event.relatedTarget: oggetto correlato all'evento (es. l'elemento su cui si è passati con il mouse in un evento mouseover)• event.pageX: coordinata X corrente del puntatore del mouse rispetto alla pagina• event.pageY: coordinata Y corrente del puntatore del mouse rispetto alla pagina• event.offsetX: coordinata X corrente del puntatore del mouse rispetto all'elemento emittente• event.offsetY: coordinata Y corrente del puntatore del mouse rispetto all'elemento emittente• event.which: valore del/i tasto/i del mouse premuto/i al momento della segnalazione dell'evento. Nessun tasto = 0, left button = 1, middle button = 2, right button = 3, 4th button = 4, 5th button = 5.(Se + tasti premuti si sommano i valori)

mousemove event Informatica multimediale – JavaScript e HTML Canvas

event.currentTarget: oggetto corrente che ha emesso l’evento

event.detail: contatore degli eventi segnalati (non per tutti gli eventi, si veda specifica)

Es:Es “Coordinate mouse”:

Es “Circle on click”:

Informatica multimediale – JavaScript e HTML Canvas

COME GESTIRE IN MANIERA DINAMICA LA GRANDEZZA DEL CANVAS?

Ogni canvas ha due proprietà WIDTH e HEIGHT che rappresentano la larghezza e l’altezza del canvas. Le proprietà WIDTH ed HEIGHT possno essere usate sia in lettura che in scrittura.

Var x = c.width, legge la larghezza del canvas e la assegna ad x

c.width = 800; cambia la larghezza di c portandola ad 800px.

Le proprietà:

window.innerWidth

window.innerHeight

restituiscono la larghezza e l’altezza in pixel dell’area del browser destinata al contenuto HTML.

window.innerHeight

window.innerWidth

EVENTO “RESIZE”

Questo

evento è normalmente ascoltato dal browser (oggetto window) ogni volta che modifichiamo le dimensioni della sua finestra mediante mouse

Es "FreeHandDrawing": Informatica multimediale - JavaScript e HTML Canvas

ALCUNI EVENTI DELLA TASTIERA

keydown: evento che viene segnalato quando si preme un qualsiasi tasto della tastiera

keypress: evento che viene segnalato quando si preme un tasto della tastiera che produce un carattere (no shift, alt, ctrl,...)

keyup: evento che viene segnalato quando si rilascia un qualsiasi tasto

Norm