W3docs
it
Accedi

Testo su Canvas

HTML5 canvas consente di disegnare testo con proprietà font. Esempi di fillText, strokeText, aggiunta di colore e centratura del testo.

L'elemento HTML5 <canvas> consente di disegnare testo direttamente su una superficie bitmap. A differenza del testo DOM ordinario, il testo su canvas viene dipinto come pixel — una volta tracciato, non ha markup, non può essere selezionato, copiato o letto dagli screen reader, e non va mai a capo automaticamente. L'aspetto viene controllato tramite il contesto di disegno (getContext("2d")) anziché con CSS, il che rende il testo su canvas ideale per grafica, grafici, interfacce di gioco e generazione di immagini, ma una scelta inadatta per il corpo del testo.

Questo capitolo si basa sull'introduzione a Canvas e sulle nozioni di base del disegno. Per colorare il testo con gradienti, consulta Gradienti Canvas.

Proprietà e Metodi

Proprietà / MetodoDescrizione
fontRestituisce le impostazioni attuali del font e può essere impostata per modificarlo.
textAlignRestituisce le impostazioni di allineamento del testo correnti e può essere impostata per modificare l'allineamento. La proprietà accetta i seguenti valori: start, end, left, right e center. Da notare che start ed end dipendono dalla direzione del testo.
textBaselineRestituisce le impostazioni di allineamento della baseline correnti e può essere impostata per modificare l'allineamento della baseline. La proprietà accetta i seguenti valori: top, hanging, middle, alphabetic, ideographic e bottom.
fillStyleImposta il colore usato per riempire il testo.
strokeStyleImposta il colore usato per tracciare il contorno del testo.
fillText(text, x, y [, maxWidth])Disegna un testo pieno nella posizione indicata dalle coordinate x e y. L'argomento facoltativo maxWidth riduce il testo in modo che non superi mai quella larghezza in pixel.
strokeText(text, x, y [, maxWidth])Traccia il contorno del testo nella posizione indicata dalle coordinate x e y. Accetta anch'esso l'argomento facoltativo maxWidth.
measureText(text)Restituisce un oggetto TextMetrics la cui proprietà width indica la larghezza che avrebbe il testo con il font corrente. Utile per centrare, mandare a capo o adattare il testo.

La proprietà font

La proprietà font accetta lo stesso valore della proprietà CSS abbreviata font. È possibile combinare stile, peso, dimensione e famiglia in una sola stringa, ad esempio "italic bold 18px serif". Se si imposta solo una dimensione e una famiglia (es. "30px Arial"), gli altri valori tornano ai loro predefiniti. Includere sempre una dimensione e una famiglia — omettere uno dei due rende la dichiarazione non valida e la modifica viene ignorata.

ctx.font = "italic bold 18px serif";
ctx.font = "small-caps 24px 'Courier New', monospace";
ctx.font = "30px Arial"; // size + family only — also valid

Esempio del metodo fillText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>
Provalo tu stesso »

Esempio del metodo strokeText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>
Provalo tu stesso »

Esempio di aggiunta di colore e centratura del testo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>
Provalo tu stesso »

Allineamento del testo con textAlign

La coordinata x passata a fillText/strokeText è il punto di ancoraggio. La proprietà textAlign stabilisce dove il testo si posiziona rispetto a quell'ancora. Il valore predefinito è "start", che segue la direzione del testo — quindi si comporta come "left" per testo da sinistra a destra e come "right" per testo da destra a sinistra. Con "left" l'ancora è il bordo sinistro; con "center" il testo viene centrato sull'ancora; con "right" l'ancora è il bordo destro; "start" e "end" corrispondono ai bordi in base alla direzione del testo.

L'esempio seguente disegna una linea di riferimento verticale a x = 150, quindi stampa tre etichette ancorate a quella stessa x con valori textAlign diversi, in modo da vedere come ognuno posiziona il testo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="160" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const x = 150;

      // Reference line at the anchor x
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 160);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textAlign = "left";
      ctx.fillText("left", x, 40);

      ctx.textAlign = "center";
      ctx.fillText("center", x, 80);

      ctx.textAlign = "right";
      ctx.fillText("right", x, 120);
    </script>
  </body>
</html>

Posizionamento verticale del testo con textBaseline

La coordinata y viene misurata rispetto alla baseline del testo, e textBaseline controlla a quale parte dei glifi quella baseline fa riferimento. Il valore predefinito è "alphabetic", dove y si trova all'incirca sulla parte inferiore delle lettere come "x". Impostarlo su "top" fa sì che y corrisponda alla parte superiore del testo, oppure su "middle" per centrare verticalmente il testo su y — utile quando si desidera centrare il testo in un riquadro.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const y = 60;

      // Reference line at the anchor y
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(320, y);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textBaseline = "top";
      ctx.fillText("top", 10, y);

      ctx.textBaseline = "middle";
      ctx.fillText("middle", 90, y);

      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, y);
    </script>
  </body>
</html>

Testo con contorno (strokeText + fillText)

È possibile combinare un riempimento e un contorno sullo stesso testo per ottenere un effetto delineato. Chiamare prima fillText per stendere il colore solido, poi strokeText sopra in modo che il contorno rimanga nitido. Impostare fillStyle, strokeStyle e lineWidth per controllare l'aspetto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="360" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");

      ctx.font = "bold 60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      const x = canvas.width / 2;
      const y = canvas.height / 2;

      ctx.fillStyle = "gold";
      ctx.fillText("Canvas", x, y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.strokeText("Canvas", x, y);
    </script>
  </body>
</html>

Misurazione del testo con measureText()

measureText() restituisce un oggetto TextMetrics che descrive come verrebbe reso il testo con il font corrente. La proprietà width è quella più comunemente usata: è possibile sottrarre il suo valore dalla larghezza del canvas per centrare il testo manualmente, oppure confrontarlo con una larghezza disponibile per suddividere testo lungo in più righe.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="100" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const text = "Measured!";

      ctx.font = "30px Arial";
      const metrics = ctx.measureText(text);

      // Center horizontally without changing textAlign
      const x = (canvas.width - metrics.width) / 2;
      ctx.fillText(text, x, 55);
    </script>
  </body>
</html>

Suggerimento: quando è sufficiente che il testo rientri in una larghezza fissa, l'opzione più semplice è l'argomento facoltativo maxWidth — ctx.fillText("Long label", 10, 40, 120) riduce il testo in modo che non superi mai 120 pixel.

Esercitazione

Pratica
Cosa fa il metodo 'fillText()' del canvas?
Cosa fa il metodo 'fillText()' del canvas?
Pratica
Quale proprietà controlla la posizione orizzontale del testo rispetto alla sua coordinata x?
Quale proprietà controlla la posizione orizzontale del testo rispetto alla sua coordinata x?
Pratica
Cosa restituisce measureText('Hello')?
Cosa restituisce measureText('Hello')?
Pratica
Quale valore è un'impostazione valida per la proprietà 'font' del canvas?
Quale valore è un'impostazione valida per la proprietà 'font' del canvas?
Pratica
Qual è lo scopo dell'argomento facoltativo maxWidth di fillText()?
Qual è lo scopo dell'argomento facoltativo maxWidth di fillText()?
Was this page helpful?