Canvas

L’immagine, presente nella pagina, può essere referenziata tramite document.images document.getElementByTagName(“img”) document.getElementById(“img_id”) oppure può essere creata, con un URL qualsiasi, tramite var img=new Image(); img.src=”name.ext”; Prima di utilizzare l’immagine bisogna essere sicuri che sia stata caricata con img.onload=”function () { … }” Per visualizzare un’immagine esiste drawImage() con 3 scelte per i parametri drawImage(img, x, y) … Leggi tutto

I gradienti sono dei modelli di colore da assegnare a fillStyle() e/o strokeStyle() prima di utilizzare le funzioni grafiche lg=createRadialGradient(x0,y0,r0, x1,y1,r1), piuttosto complicato… lg.addColorStop(p, colore), aggiunge una per una le posizioni, da 0 a 1 (relative…), dove cambiare colore Esempi Cambia il raggio interno oppure il raggio esterno per spostare la posizione del primo o … Leggi tutto

I gradienti sono dei modelli di colore da assegnare a fillStyle() e/o strokeStyle() prima di utilizzare le funzioni grafiche Esempi Il primo stop di colore rosso è in alto a sinistra.Il secondo stop di colore blu è in alto a destra. Il primo stop di colore rosso è in alto a sinistra.Il secondo stop di … Leggi tutto

I colori si utilizzano con addColorStop(…) fillStyle=”…” strokeStyle=”…” Il colore viene specificato, con una stringa, in molti modi diversi “red“, nome in inglese “#F00“, 3 cifre esadecimali RGB “#FF0000“, 6 cifre esadecimali RGB “rgb(255,0,0)“, codifica CSS, 3 valori RGB Con trasparenza (da 00 a FF oppure da 0.0 a 1.0) “#F007“, 4 cifre esadecimali RGBA “#FF00007F“, 8 … Leggi tutto

L’ellisse è simile all’arco (cerchio…) ma ha due raggi e un angolo di orientamento ellipse(x,y, r1,r2, angolo, start,end, [counter-clockwise]) Un’ellisse al centro, oppure tre ellissi con rotazione, in senso orario, dell’asse maggiore (pi/6) Due semi-ellissi, anche con le rotazioni (pi/4) Tre settori di colore diverso della stessa ellisse

Tramite l’istruzione si accede al contesto grafico con il quale si può operare graficamente sul pannello. Altri valori per l’argomento sono Proprietà Metodi

L’oggetto Canvas si comporta come una tela (un pannello) all’interno della pagina HTML. Le proprietà essenziali sono Altri attributi (tutti quelli globali in HTML!) Il pannello standard appare come una superficie bianca senza contorno (è invisibile…)In assenza delle dimensioni saranno applicate le misure standard 300×150. L’attributo style è essenziale per fissare le caratteristiche del bordo … Leggi tutto

Se la linea ha un certo spessore allora diventa importante il modo con cui si disegnano gli estremi e le giunzioni lineCap=”…”, gli estremi di un segmento butt, normale round, si aggiunge un prolungamento a semicerchio square, si aggiunge un prolungamento quadrato lineJoin=”…”, la giunzione tra due tratti bevel, angolo triangolare round, angolo a semicerchio … Leggi tutto

La linea non ha un punto di inizio e un punto di fine ma è costituita da una sequenza di punti. Si descrive una spezzata, invece di un segmento, e alla fine si disegna e/o si colora tutto. beginPath(), comincia un percorso, annulla il precedente closePath(), collega il punto attuale con il primo nel percorso, … Leggi tutto

Scegli il numero di vertici (fino a 36) e il salto per il prossimo vertice. Tutte le strisce partono dal vertice centrale. Diminuisci il numero di chiodi se aumenti il salto altrimenti la figura diventa troppo densa. Vertici Salto Chiodi