Canvase dibujo de texto

Dibujo de texto

Canvas 2D API proporciona dos métodos para dibujar texto y un método para verificar el ancho de la fuente

Descripción de la variable del método

Nombre variable	Tipo	Es necesario	Explicación
texto	cuerda	Si	Texto a rellenar
X	Número	Si	Especifique la coordenada X de la esquina superior izquierda
y	Número	Si	Especifique la coordenada Y de la esquina superior izquierda
anchura máxima	Número	No	El ancho máximo del dibujo. Si el texto no alcanza el ancho máximo, se muestra normalmente. Si se excede el ancho máximo, el ancho del texto se comprimirá al valor establecido

Texto de relleno

Sintaxis de texto de relleno

Rellene el texto en la posición especificada,
se puede seleccionar el ancho máximo del dibujo, es decir, el texto dibujado es sólido

fillText (texto, x, y [, maxWidth])

Ejemplo de texto de relleno

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//没有配置最大宽度
		ctx.fillText("Hello IMooc",10,50);
	</script>
</body>
</html>

Texto hueco

Dibujar gramática de texto hueco

Dibuje el borde del texto en la posición especificada (x, y), el ancho máximo del dibujo opcional es
que el texto dibujado es hueco

strokeText (texto, x, y [, maxWidth])

Ejemplo de dibujar texto hueco

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//传入最大宽度
		ctx.strokeText("Hello IMooc",10,50, 100);
	</script>
</body>
</html>

Comprobar ancho de texto

Verificar la sintaxis de ancho de texto

Este método devuelve un objeto TextMetrics de texto medido
Este objeto contiene múltiples atributos como el ancho del texto, la distancia a la derecha del borde del rectángulo de texto, etc.

measureText (texto)
Ejemplo de verificación del ancho del texto

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c = document.getElementById("imooc");
		var ctx = c.getContext("2d");
		var txt = "Hello IMooc"
		// measureText不会渲染canvas，知识返回了一个包含多个属性的对象
		var textMetricsObj = ctx.measureText(txt)
		alert(textMetricsObj.width)
	</script>
</body>
</html>

Estilo de texto

El dibujo de texto de la API 2D de Canvas proporciona cuatro propiedades para establecer el estilo de texto, veremos cada una

Configuración de fuente.

Descripción de Font settings.font

.font es una propiedad establecida por la API 2D de Canvas para describir el estilo de fuente actual al dibujar texto.
Use el mismo valor de cadena que la especificación de fuente CSS.
Valor predeterminado: 10px sans-serif

Gramática

ctx.font = value;

Descripción del parámetro

Nombre variable	Tipo	Es necesario	Explicación
valor	cuerda	Si	Cadena de sintaxis conforme a la fuente en CSS

Configuraciones de fuente de ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//设置了字体大小，和字体样式
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		ctx.fillText("Hello IMooc",10,50);
	</script>
</body>
</html>

Configuraciones de alineación.

Configuración de alineación TextAlign Descripción

.textAlign es una propiedad proporcionada por Canvas 2D API para establecer la alineación del texto.
Valor predeterminado: inicio

En particular,
la alineación es para el valor X del método .fillText / .strokeText. Entonces, si textAlign = "center", el texto se dibujará con un ancho x-50% *

Gramática

ctx.textAlign = value;

Descripción del valor

valor puede tomar los siguientes valores

valor	Explicación	Instrucciones especiales
izquierda	Texto alineado a la izquierda	La alineación es para el valor de X para el método .fillText / .strokeText
derecho	Texto a la derecha	La alineación es para el valor de X para el método .fillText / .strokeText
centrar	Alinear texto	La alineación es para el valor de X para el método .fillText / .strokeText
comienzo	El lugar donde comienza la línea de alineación de texto, alineación izquierda predeterminada	Utilizado con el atributo de dirección, ltr: de izquierda a derecha, rtl: de derecha a izquierda
final	Donde termina la línea de alineación de texto, el valor predeterminado es la alineación correcta	Usado con el atributo de dirección, ltr: de izquierda a derecha, rtl: de derecha a izquierda.

Suplemento

Si desea centrar el texto en todo el lienzo, solo necesita establecer el valor x de fillText en la mitad del ancho del lienzo y el valor .textAlign en el centro.
Iniciar y detener son equivalentes a izquierda y derecha por defecto. Si el valor de la dirección se establece en: rtl, lo contrario es cierto
El atributo de dirección no se ha incluido en el documento estándar, la compatibilidad es muy pobre, por lo que para el uso de inicio y fin, consulte izquierda y derecha

Ejemplos de configuraciones de alineación

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//X的值为175，在画布正中间
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		ctx.textAlign="left"
		ctx.fillText("Left Imooc",175,50);
		ctx.textAlign="center"
		ctx.fillText("Center IMooc",175,100);
		ctx.textAlign="right"
		ctx.fillText("Right IMooc",175,150);
	</script>
</body>
</html>

Ajústelo verticalmente.

Ajústelo verticalmente TextBaseline Descripción

.textBaseline es una propiedad de alineación vertical de texto (propiedad de alineación de línea de base) proporcionada por Canvas 2D API.
Valor predeterminado: alfabético

Gramática

ctx.textBaseline = valor;

Descripción del valor

valor puede tomar los siguientes valores

valor	Explicación	Instrucciones especiales
parte superior	La línea de base de texto está en la parte superior del bloque de texto.
colgando	La línea de base de texto es una línea de base colgante
medio	La línea de base de texto está en el medio del bloque de texto.
alfabético	La línea base de texto es una línea base de letra estándar.
ideográfico	La línea de base de texto es la línea de base ideográfica	Si el personaje en sí excede la línea de base alpática, entonces la posición de la línea de base ideográfica se encuentra en la parte inferior del personaje.
fondo	La línea de base de texto está en la parte inferior del bloque de texto.	La diferencia con la línea de base ideográfica es que la línea de base ideográfica no necesita considerar letras descendentes.

Suplemento

Si desea centrar el texto en todo el lienzo, solo necesita establecer el valor x de fillText en la mitad del ancho del lienzo y el valor .textAlign en el centro.
Iniciar y detener son equivalentes a izquierda y derecha por defecto. Si el valor de la dirección se establece en: rtl, lo contrario es cierto
El atributo de dirección no se ha incluido en el documento estándar, por lo que la compatibilidad es muy pobre, no se recomienda utilizar

Configuraciones de fuente de ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		
		//设置了不同垂直对齐方式
		ctx.textBaseline="top"
		ctx.fillText("TOPtop",0,50, 100);
		ctx.textBaseline="hanging"
		ctx.fillText("HANGING hanging",150,50, 100);
		ctx.textBaseline="middle"
		ctx.fillText("MIDDLEmiddle",305,50);
	</script>
</body>
</html>

Configuración de la dirección del texto.

Configuración de la dirección del texto.

.textBaseline es una propiedad de alineación vertical de texto (propiedad de alineación de línea de base) proporcionada por Canvas 2D API.
Valor predeterminado: heredar

Gramática

ctx.textBaseline = valor;

Descripción del valor

valor puede tomar los siguientes valores

valor	Explicación	Instrucciones especiales
ltr	La dirección del texto es de izquierda a derecha.	abreviatura de izquierda a derecha
RTL	La dirección del texto es de derecha a izquierda.	abreviatura de derecha a izquierda
heredar	Herede el elemento de lienzo o documento según la situación	Predeterminado de izquierda a derecha

Suplemento

El atributo de dirección no se ha incluido en el documento estándar, por lo que la compatibilidad es muy pobre, no se recomienda utilizar

Configuraciones de fuente de ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		
		//设置了不同垂直对齐方式
		ctx.direction = "ltr";		
		ctx.fillText("Hello IMooc",305,50);
	</script>
</body>
</html>