HTML5 Dibujar texto en el lienzo

HTML5 El lienzo puede usar varios tipos de fuente, tamaños y colores en HTML5Dibujar texto en el lienzo, el aspecto del texto se determina por estos2D Propiedad Contexto font. Para dibujar texto, utilice las funciones fillText() o strokeText()

Ejemplo en línea

Se pueden usar varios tipos de fuente, tamaños y colores en HTML5Dibujar texto en el lienzo.
El aspecto del texto se determina por estos2D Propiedad Contexto font. Además, debe configurar fillStyle o strokeStyle según si desea dibujar texto de relleno o texto contorneado2D Propiedad Contexto.
Para dibujar texto, utilice las funciones fillText() o strokeText()
Este es un ejemplo de código simple:

<canvas id="ex1" ancho="500" altura="100" style="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d")
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML"5　Canvas Text　50,　90);
　</script>

Este es el resultado al dibujar en el lienzo:

fuente y estilo

en HTML5Al dibujar texto en el lienzo, es necesario configurar la fuente a usar. Esto se hace mediante la configuración2El valor de la propiedad font del contexto D. Esta propiedad es una cadena de caracteres con valores compatibles con CSS, con el formato:

[estilo de fuente][peso de fuente][tamaño de fuente][fuente]

Por ejemplo

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

Puede establecer los siguientes valores para cada parte de la cadena de fuente:

Tenga en cuenta que no todos los navegadores admiten todos los valores. Antes de depender de ellos, debe probar los valores planificados para usar.
Este es otro ejemplo:

"italic bold"　36px Arial"

dibujo de texto

Como se mencionó anteriormente, en HTML5Al dibujar texto en el lienzo, puede dibujar texto relleno o texto contorneado. Puede usar2Las funciones D上下文 fillText() y strokeText(). Estas funciones se definen como:

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

El parámetro textString es el texto que se dibuja.
En x e y representan las posiciones obtenidas en el texto. El parámetro x es el lugar de inicio del texto. El parámetro y es la posición vertical del texto, pero la representación exacta depende de la línea base. La línea base se explicará en la parte posterior.
El texto maxWidth se cubre en la parte inferior.
Este es un ejemplo de código:

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

ancho máximo del texto

parámetro maxWidth indica al lienzo que el texto no debe ocupar más espacio horizontalmente que el valor dado. Si el texto es demasiado ancho y no puede caber en maxWidth, se comprimirá el ancho del texto. No se cortará. Aquí hay un ejemplo de código de ejemplo con y sin usar el mismo texto dibujado con maxWidth:

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

这是在HTML5在画布上绘制时这两个文本的外观：

如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素.

文字颜色

像其他任何形状一样，使用2D上下文的fillStyle和strokeStyle属性设置填充或描边文本的颜色。在这里，我不会更详细地介绍这些属性。有关更多详细信息，请参见描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例：

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

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释和设置y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义：

这是一个示例，该示例中y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。绘制一条线y=75，向您展示如何围绕该y值设置文本基线。

以下是为生成上述图形的代码：

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("medio",　120,　75);
context.textBaseline = "alfabético";
context.fillText("alfabético",　200,　75);
context.textBaseline = "ideofonético";
context.fillText("ideofonético",　300,　75);
context.textBaseline = "abajo";
context.fillText("abajo",-glifo",　400,　75);

Alineación de texto

2La propiedad textAlign del contexto define cómo alinearse horizontalmente el texto al dibujar. En otras palabras, la propiedad textAlign define la coordenada x en la que se dibuja el texto.

A continuación se muestran algunos ejemplos que demuestran cómo funciona la propiedad textAlign. La línea vertical se dibuja en x = 250. Todos los textos también se dibujan con x = 250, pero el valor de textAlign es diferente.

Este es un ejemplo de código gráfico:

<canvas id="ex4" ancho="500" altura="120" style="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</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>

El resultado de la ejecución del código es el siguiente: