Texto de lienzo HTML
Dibujar texto en el lienzo
Para dibujar texto en un lienzo, las propiedades y los métodos más importantes son:
- font - define las propiedades de la fuente para el texto
- fillText( text,x,y ) - dibuja texto "relleno" en el lienzo
- strokeText( text,x,y ) - dibuja texto en el lienzo (sin relleno)
Usando texto de relleno ()
Ejemplo
Establezca la fuente en 30px "Arial" y escriba un texto completo en el lienzo:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Usando trazoTexto()
Ejemplo
Establezca la fuente en 30px "Arial" y escriba un texto, sin relleno, en el lienzo:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Agregar color y texto central
Ejemplo
Establezca la fuente en 30px "Comic Sans MS" y escriba un texto rojo relleno en el centro del lienzo:
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);