Percorsi

La modalità con cui si disegna nell’oggetto Canvas è diversa dalle tecniche tradizionali. Si scelgono le impostazioni grafiche: fillStyle, lineWidth, strokeStyle, … Si descrive un percorso tramite una sequenza di figure elementari: arc(), arcTo(), ellipse(), lineTo(), … Con fill() e/o stroke() si colora/disegna tutto come un’unica figura Funzioni beginPath(), comincia un percorso Annulla il percorso eventualmente … Leggi tutto

Dimensioni

L’accesso a width e height in scrittura provoca il ridimensionamento del pannello e l’esecuzione di clearRect(…), la pulizia di tutto il contenuto. L’accesso a width e height in lettura permette di realizzare grafici che si adattano alle dimensioni del pannello. Il primo pixel in alto a sinistra ha coordinate (0,0). Si può fare riferimento al … Leggi tutto

Testi

Proprietà g2d.direction=”…” g2d.fillStyle=”…”, le caratteristiche del riempimento … g2d.font=”…”, le caratteristiche del font da utilizzare, nello stile di CSS ma con delle limitazioni … g2d.strokeStyle=”…”, le caratteristiche del contorno … g2d.textAlign=”…” “left”, “center”, “right” “start”, “end” g2d.textBaseline=”…” … Metodi g2d.fillText(text, x, y), scrive il riempimento del testo text, alla posizione (x,y) g2d.strokeText(text, x, y), scrive … Leggi tutto

Riepilogo Canvas

canvas ? g2d=cs.getContext(“2d”) contesto grafico 2d della canvas cs=document.getElementById(“…”) restituisce il riferimento all’oggetto Canvas specificato cs.height=”…” imposta l’altezza della finestra grafica h=cs.height l’altezza della finestra grafica cs.style=… imposta lo stile della finestra grafica (sfondo, bordo, …) cs.width=”…” imposta la larghezza della finestra grafica w=cs.width la larghezza della finestra grafica getContext(“2d”) ? g2d.arc(x,y, radius, startAngle,endAngle) … … Leggi tutto