Come abbiamo visto le APIs espongono funzionalità per disegnare forme geometriche, semplici o complesse, ma non si limitano a questo; fanno parte delle specifiche una serie di settings e funzioni dedicate alla creazione di testi:
context.font
Se non facente parte di un assegnamento ritorna il font-setting corrente; può essere impostato seguendo la sintassi CSS della proprietà font, l’ordine di definizione delle varie componenti è il seguente: font-style font-variant font-weight font-size/line-height font-family; esempio: context.font = italic normal 14px/20px Tahoma, sans-serif;
context.textAlign
Se non facente parte di un assegnamento ritorna l’allineamento del testo corrente; può essere impostato ad uno dei seguenti valori:
- start (è il default)
- end
- left
- right
- center
context.textBaseline
Se non facente parte di un assegnamento ritorna il baseline alignment (allineamento del testo al margine inferiore della riga) corrente; può essere impostato ai valori: top, hanging, middle, alphabetic, ideographic, bottom.
context.fillText(text, x, y [, maxWidth ]), context.strokeText(text, x, y [, maxWidth ])
Rispettivamente, riempie/tratteggia sul canvas la stringa text partendo dalle coordinate (x, y); quando maxWidth è valorizzato ed uguale a true il font viene ridimensionato per rispettare la larghezza massima indicata.
metrics = context.measureText(text)
Ritorna un oggetto TextMetrics con le informazioni metriche del testo in oggetto nel font corrente.
metrics.width
Ritorna (getter) la larghezza del testo passata al metodo measuredText().
Ecco un esempio completo che disegna un piano cartesiano assegnando le label per le ascisse e per le ordinate.
<!doctype html>
<html>
<head>
<title>La mia presentazione</title>
<script src="jquery.js"></script>
<script>
// # Al DOM Ready
$(function() {
// # Ottengo l'oggetto relativo al canvas
var canvasObj = document.getElementById("c_area");
context = canvasObj.getContext("2d"); // recupero il contesto
// # Scelta del font
context.font = "12px/2 Arial, sans-serif";
context.strokeStyle = "#555";
// # il metodo stroketext(text, x, y, [maxWidth]) scrive direttamente sul canvas
context.strokeText("tempo", 80, 140);// label ascisse
context.strokeText("valore", 10, 40);// label ordinate
// Piano Cartesiano
// # Ascisse
context.beginPath();
context.moveTo(60, 20);
context.lineTo(60, 120);
context.stroke();
context.closePath();
// # Ordinate
context.beginPath();
context.moveTo(50, 110);
context.lineTo(180, 110);
context.stroke();
context.closePath();
// # Colorazione del piano tramite gradiente
var linearGradient = context.createLinearGradient(60, 20, 120, 90);
linearGradient.addColorStop(0, '#ccc'); // grigio
linearGradient.addColorStop(1, '#efefef'); // grigio tenue
context.fillStyle = linearGradient;
context.rect(60, 20, 120, 90);
context.fill();
});
</script>
</head>
<body>
<article>
<canvas id="c_area" height="300px">Impossibile mostrare il canvas</canvas>
</article>
</body>
</html>Il risultato così come mostrato in Firefox 9:
