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 lg=createLinearGradient(x0,y0, x1,y1), specifica le coordinate (assolute) dei due punti del pannello tra i quali verrà applicato il gradiente lineare lg.addColorStop(p, colore), aggiunge una per una le posizioni, da 0 a 1 (relative…), dove cambiare colore Esempi … 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 g2d=canvas.getContext(“2d”); si accede al contesto grafico con il quale si può operare graficamente sul pannello. Altri valori per l’argomento sono webgl webgl2 bitmaprenderer Proprietà fillStyle font lineCap lineDashOffset lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline … Metodi arcTo() beginPath() bezierCurveTo() clearRect() clip() closePath() createImageData() createLinearGradient() createPattern() createRadialGradient() fill() fillRect() filltext() … Leggi tutto
L’oggetto Canvas si comporta come una tela (un pannello) all’interno della pagina HTML. Le proprietà essenziali sono height=…, la dimensione verticale del pannello, in pixel id=”…”, permette a Javascript di raggiungere l’oggetto tramite getElementById(“…”) width=…, la dimensione orizzontale del pannello, in pixel Altri attributi (tutti quelli globali in HTML!) style=”…”, specifiche di stile CSS in … 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