Lienzo HTML5: Texto | TIEngranaje

Para dibujar texto usando Lienzo HTML5tenemos acceso a algunas propiedades y métodos, como la propiedad de fuente y la fillText() método del contexto del lienzo. El font La propiedad del contexto del lienzo se utiliza para establecer el estilo, el tamaño y la familia de la fuente. Similar a CSSel estilo puede ser normal, cursiva o negrita.

Después de configurar el font propiedad, puede proceder a dibujar el texto con la fillText() método. Incluso puede aplicar un relleno degradado para el texto. Echaremos un vistazo a algunos ejemplos a continuación.

propiedad de fuente

El font property establece o devuelve las propiedades de fuente actuales para el contenido de texto en el lienzo. Esta propiedad utiliza la misma sintaxis como la propiedad de fuente CSS.

context.font="font-style font-varient font-weight font-size font-family";

Método de relleno de texto ()

El fillText() El método dibuja texto relleno en el lienzo. El color predeterminado del texto es negro. Podemos usar el font y fillstyle propiedades para personalizar el formato del texto.

context.fillText(string,x,y,maxWidth);

Parámetro	Descripción
string	Especifica el texto que se escribirá.
x	Especifica la coordenada X para comenzar a escribir texto.
y	Especifica la coordenada Y para comenzar a escribir texto.
maxWidth	El valor opcional especifica el ancho máximo permitido del texto.

Sintaxis

  context.font="bold 16px Arial";
  context.fillText(string, x, y, maxWidth);

Ejemplo

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #AAAAAA;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.font="bold 16px Arial";
    context.fillText('Hello World!', 70, 100);

    context.font = "24px Tahoma";
    var gradient = context.createLinearGradient(60, 0, 195, 0);
    gradient.addColorStop("0", "red");
    gradient.addColorStop("0.5", "orange");
    gradient.addColorStop("1.0", "blue");
    context.fillStyle = gradient;
    context.fillText("Hello World!", 60, 110);
</script>

propiedad textAlign

El textAlign La propiedad establece o devuelve la alineación actual del contenido del texto, según el valor inicial. Generalmenteel texto comenzará en la posición especificada y se pintará hacia la izquierda, pero el textAlign La propiedad colocará el texto de acuerdo con el valor de alineación.

context.textAlign="start|end|left|center|right";

Ejemplo

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle="#FFAA00";
    context.moveTo(200,20);
    context.lineTo(200,180);
    context.stroke();

    context.font = "24px Arial";
    context.textAlign = "start";
    context.fillText("Start", 200, 40);
    context.textAlign = "end";
    context.fillText("End", 200, 75);
    context.textAlign = "left";
    context.fillText("Left", 200, 110);
    context.textAlign = "center";
    context.fillText("Center", 200, 145);
    context.textAlign = "right";
    context.fillText("Right", 200, 180);
</script>

propiedad textBaseline

El textBaseline propiedad establece o devuelve el línea de base de texto actual se utiliza al dibujar texto. Nota que diferentes navegadores interpretarán esta propiedad de manera diferente. El valor predeterminado para esta propiedad es alfabético.

context.textBaseline="alphabetic|bottom|hanging|ideographic|middle|top";

Ejemplo

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#FFAA00";
    context.moveTo(20, 100);
    context.lineTo(580, 100);
    context.stroke();
    context.font = "24px Arial";

    context.textBaseline = "alphabetic";
    context.fillText("Alphabetic", 20, 100);
    context.textBaseline = "bottom";
    context.fillText("Bottom", 145, 100);
    context.textBaseline = "hanging";
    context.fillText("Hanging", 230, 100);
    context.textBaseline = "ideographic";
    context.fillText("Ideographic", 320, 100);
    context.textBaseline = "middle";
    context.fillText("Middle", 460, 100);
    context.textBaseline = "top";
    context.fillText("Top", 540, 100);
</script>

método de texto de trazo

El strokeText() El método dibuja texto en el lienzo. El color predeterminado del texto es negro. El strokeText() el método agrega sin relleno al texto Puede usar un color sólido o un relleno degradado para el contorno del texto.

context.strokeText(text,x,y,maxWidth);

Ejemplo

<script>
    var canvas = document.getElementById("Canvas4");
    var context = canvas.getContext("2d");
    context.font = "36px Tahoma";
    var gradient = context.createLinearGradient(60, 0, 250, 0);
    gradient.addColorStop("0", "red");
    gradient.addColorStop("0.5", "orange");
    gradient.addColorStop("1.0", "blue");
    context.strokeStyle = gradient;
    context.strokeText("Hello World!", 60, 110);
</script>