Javascript e html canvas

Informatica multimediale – JavaScript e HTML Canvas

JAVASCRIPT E HTML CANVAS

L’elemento HTML5 Canvas permette di definire delle aree su di un documento HTL in cui disegnare

elementi grafici/testuali ed animarli mediante JavaScript.

Gli HTML Canvas si definiscono in un documento HTML mediante la sintassi:

height width

dove e sono attributi i

cui valori rappresentano altezza e

larghezza in pixel del canvas

<Sul CANVAS possiamo applicare delle regole CSS. Tutti i canvas contenuti nel body

avranno un bordo rosso solido di 5px

ACCEDERE A UN CANVAS

JavaScript è dotato di metodi per poter selezionare un canvas ed

accedere al suo contenuto grafico (2D context).

Si accede al contenuto grafico mediante il codice:

var canvas = document.getElementById( “idcanvas” ); (RECUPERA IL CANVAS SU CUI VUOLE

LAVORARE)

var ctx = canvas.getContext( “2d” );

CTX è il piano cartesiano su cui lavoreremo. Posso vedere il canvas come un piano cartesiano.

Informatica multimediale – JavaScript e HTML Canvas

STRUTTURA DI BASE

L’attributo ONLOAD permette di eseguire la funzione “Draw” quando l’intero body è stato caricato.

DISEGNARE UN CANVAS

Due tipi di figure primitive

• Rettangoli

o Percorsi/path (lista di punti collegati da segmenti)

o

Tali figure vengono definite tramite dei comandi JavaScript.

RETTANGOLI

Possiamo disegnare solo il perimetro o disegnare anche l’interno:

fillRect (x,y, width, height)

• Visualizza l’area del rettangolo (con il colore di default).

StrokeRect (x,y, width, height)

• Disegna il perimetro di un rettangolo (con il colore di default).

WIDTH/HEIGHT: definiscono la larghezza e l’altezza in pixel del nostro rettangolo

ClearRect (x,y,width, height)

• Disegna un rettangolo (con il colore di trasparente).

Informatica multimediale – JavaScript e HTML Canvas

!!ATTENZIONE!! x,y fanno riferimento all’angolo sinistro del rettangolo

Struttura di base:

PATHS

beginPath() inizia un nuovo percorso

• 

closePath() chiude un percorso

• 

stroke() rende visibile il percorso (usa colore di default)

• 

fill() riempie la figura definita dal percorso (usando il colore di default)

• 

Possiamo usare diversi metodi per definire un path:

moveTo(x,y) sposta la “penna” (senza disegnare) al punto (x,y)

• 

lineTo (x,y) disegna un segmento dal punto corrente della penna, al punto indicato dalle coordinate

• 

(x,y)

arc (x,y, radius, startAngle, endAngle, anticlockwise) disegna un arco di cerchio di raggio

• 

RADIUS, centrato nel punto (x,y) che parte dall’angolo startAngle e arriva all’angolo endAngle. Il

paramentro anticlockwise vale FALSE se si percorre l’arco in senso orario, TRUE altrimenti.

Disegno di un triangolo

Archi Esempio archi:

Informatica multimediale – JavaScript e HTML Canvas

PROPRIETÀ DEI CANVAS

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

• 

(notazione rgb, numero esadecimale)

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 intender