Canvas e relative APIs
Principali funzioni riguardanti le funzioni geometriche:
- context.beginPath(); crea/resetta il path corrente;
- context.closePath(); chiude il path corrente e ne apre un altro con coordinate di partenza uguali a quelle finali del path chiuso;
- context.fill(); colora il path con lo stile definito in fillStyle;
- context.stroke(); tratteggia il path con lo stile definito in strokeFill;
- contextarc(x, y, radius, startAngle, endAngle [,anticlockwise]); disegna un arco alle coordinate x,y e di raggio radius, angolo di partenza startAngle e angolo di fine endAngle, anticlockwise indica in senso antiorario;
- context.rect(x, y, w, h); disegna un rettangolo a partire da x, y e con larghezza w e altezza h;
- context.lineTo(x,y); punto con coordinate x,y, connesso al precedente da una linea;
Principali funzioni riguardanti la creazione di testi:
- context.font, ritorna il font-setting;
- context.textAlign, ritorna l’allineamento corrente;
- context.fillText(text, x, y [, maxWidth]), context.strokeText(text, x, y [, maxWidth]), riempi/tratteggia la stringa text nelle coordinate x,y se indicato maxWidth il font viene ridimensionato;
- metrics = context.measureText(text), ritorna un ogetto TextMetrics con le informazioni del testo;
- metrics.width, ritorna la larghezza del testo;
Principali funzioni grafiche:
- gradiente = context.createLinearGradient(x0, y0, x1, y1), restituisce un oggetto CanvasGradient che rappresenta un gradiente lineare che colora la linea;
- gradient = context.createRadialGradient(x0, r0, x1, y1, r1), restituisce un oggetto CanvasGradient che rappresenta un gradiente radiale che colora il cono;
- gradient.addColorStop(offset, color), aggiunge un colore al gradiente all’offset indicato;
- context.shadowColor [= valore], definire il colore dell’ombra;
- context.shadowOffsetX [= valore], context.shadowOffsetY [= valore],definire l’offset dell’ombra;
- context.shadowBlur [= valore], grado di sfocamento dell’ombra;
- context.scale(x, y), ridimensiona l’immagine;
- context.rotate(angle), applica una rotazione;
- context.translate(x, y), transla l’immagine;
- context.trasform(a, b, c, d, e, f), modifica la matrice di trasformazione;
- context.setTrasform(a, b, c, d, e, f), resetta la matrice;
Principali funzioni per le linee e pixel:
- context.lineWidth [= value], per definire lo spessore della linea;
- context.lineCap [= value], per definire lo stile di terminazione della linea;
- context.lineJoin [= value], per definire lo stile di unione di due linee;
- context.miterLimit[= value], per definire il miterLimit;
- imagedata = context.createImageData(sw, sh), crea un oggetto di dimensioni sw, sy;
- imagedata = context.createImageData(imagedata), crea un oggetto di dimensioni prese dall’oggetto indicato;
- imagedata = context.createImageData(sx, sy, sw, sh), crea un oggetto contenente i dati dell’immagine per una proporzioni rettangolari;
- imagedata.width, imagedata.height, getters riferiti alle dimensioni dell’oggetto ImageData;
- imagedata.data, getter per l’array;
- context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight]), disegna sul canvas una immagine;
