Scrittura di Testo Canvas HTML5

HTML5 Canvas può disegnare testo utilizzando vari tipi di font, dimensioni e colori, l'aspetto del testo è controllato da questi attributi font del contesto 2D, per disegnare il testo utilizzare le funzioni fillText() o strokeText().

Esempi online

È possibile disegnare testo su un canvas HTML5 utilizzando vari tipi di font, dimensioni e colori.
L'aspetto del testo è controllato da questi attributi font del contesto 2D. Inoltre, devi impostare fillStyle o strokeStyle per il contesto 2D in base a se desideri disegnare testo riempito o tracciato.
Per disegnare il testo, utilizzare le funzioni fillText() o strokeText()
Questo è un esempio di codice semplice:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d");
　　　context.font = "36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML5　Canvas　Text", 50, 50);
　　　context.font = "normale 36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("Testo Canvas HTML5", 50, 90);
　</script>

Questo è il risultato quando si disegna sul canvas:

Font e stile

Quando si disegna testo su un canvas HTML5, è necessario impostare il font da utilizzare. Questo viene fatto impostando il valore dell'attributo font del contesto 2D. Questo attributo è una stringa con valori compatibili con CSS, nel formato:

[stile del carattere][peso del carattere][dimensione del carattere][famiglia del carattere]

Ad esempio

context.font = "normale normale 20px Verdana";

Puoi impostare i seguenti valori per ogni parte della stringa del carattere:

Attenzione, non tutti i browser supportano tutti i valori. Prima di dipendere da loro, dovrai testare i valori che hai pianificato di utilizzare.
Ecco un altro esempio:

"italic bold 36px Arial"

testo di disegno

Come già menzionato, quando si disegna testo su un canvas HTML5, puoi disegnare testo riempito o testo contornato. Puoi utilizzare le funzioni fillText() e strokeText() del contesto 2D. Le definizioni di queste funzioni sono le seguenti:

fillText(textString, x, y[, maxWidth]);
strokeText(textString, x, y[, maxWidth]);

Il parametro textString rappresenta il testo da disegnare.
In x e y rappresentano le posizioni ottenute nel testo. Il parametro x è il punto di inizio del testo. Il parametro y è la posizione verticale del testo, ma il modo esatto di rappresentarla dipende dalla linea di base del testo. La linea di base del testo verrà introdotta in una parte successiva.
Il testo maxWidth è coperto nella parte sottostante.
Ecco un esempio di codice:

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);

larghezza massima del testo

Il parametro opzionale maxWidth informa il canvas che il testo non deve occupare più spazio in direzione orizzontale rispetto al valore specificato. Se il testo è troppo largo per adattarsi a maxWidth, la larghezza del testo sarà compressa. Non viene tagliato. Ecco un esempio di codice che utilizza e non utilizza maxWidth:

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);
context.fillText("HTML5　Canvas　Text", 50, 100, 200);

Ecco l'aspetto di questi due testi quando disegnati su un canvas HTML5:

Come puoi vedere, la larghezza del secondo testo è compressa per adattarsi a maxWidth di 200 pixel.

colore del testo

Come in qualsiasi altra forma, imposta il colore di riempimento o tracciamento del testo utilizzando le proprietà fillStyle e strokeStyle del contesto 2D. In questo contesto, non fornirò una descrizione dettagliata di queste proprietà. Per ulteriori dettagli, vedereTraccia e riempi.

Misurare la larghezza del testo

L'oggetto contesto 2D ha la funzione di misurare la larghezza in pixel del testo. Non può misurare l'altezza. La funzione si chiama measureText(). Ecco un esempio di codice:

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

Misurare la larghezza del testo può essere utilizzato per calcolare se una stringa di testo si adatta a uno spazio specifico ecc.

Base di testo

La base di linea determina come interpretare e il parametro y. In altre parole, la posizione verticale del testo e come questa posizione viene interpretata. Si prega di notare che i browser possono avere differenze minime nel modo in cui interpretano questo attributo. fillText()strokeText()
L'attributo textBaseline del contesto 2D viene utilizzato per impostare la base di linea del testo. Ecco i valori che può assumere e il loro significato:

Questo è un esempio in cui y disegna tutti i testi con lo stesso valore (75), ma utilizza diverse basi di linea per ciascun testo. Disegna una linea y=75 per mostrarti come impostare le basi di linea attorno a questo valore y.

Ecco il codice per generare l'immagine sopra:

context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0, 75);
context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);
context.textBaseline = "middle";
context.fillText("middle", 120, 75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);
context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);

Allineamento del testo

L'attributo textAlign della 2D context definisce come il testo viene allineato orizzontalmente durante il disegno. In altre parole, l'attributo textAlign definisce le coordinate x dove viene disegnato il testo.

Di seguito ci sono alcuni esempi che mostrano come funziona l'attributo textAlign. Le linee verticali vengono disegnate a x = 250. Tutti i testi vengono disegnati con x = 250, ma il valore dell'attributo textAlign è diverso.

Questo è un esempio di codice grafico:

<canvas id="ex4" width="500" height="120" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(250, 0);
context.lineTo(250, 250);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center", 250, 20);
context.textAlign = "start";
context.fillText("start", 250, 40);
context.textAlign = "end";
context.fillText("end", 250, 60);
context.textAlign = "left";
context.fillText("left", 250, 80);
context.textAlign = "right";
context.fillText("right", 250, 100);
</script>

I risultati dell'esecuzione del codice sono i seguenti: