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;
Please follow and like us:

Lascia un commento