Gli ultimi tutorial di sviluppo web
 

HTML Canvas Testo


Disegno di testo sulla Tela

Per disegnare il testo su una tela, la proprietà e metodi più importanti sono:

  • font - definisce le proprietà del carattere per il testo
  • fillText( text,x,y ) - disegna "filled" del testo sulla tela
  • strokeText( text,x,y ) - disegna il testo sulla tela (no fill)

Utilizzando fillText()

Esempio

Imposta carattere a 30px "Arial" e scrivere un testo pieno sulla tela:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Prova tu stesso "

Utilizzando strokeText()

Esempio

Imposta carattere a 30px "Arial" e scrivere un testo, senza riempimento, sulla tela:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Prova tu stesso "

Aggiungere colore e testo al centro

Esempio

Imposta carattere a 30px "Comic Sans MS" e scrivere un testo rosso riempito il centro della tela:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Prova tu stesso "