Manual de referencia de HTML

大全 de etiquetas HTML

Atributo textAlign de canvas HTML

textAlign es Canvas 2Descripción de la API de D para dibujar texto, el atributo de alineación del texto. Nota, este alineamiento se basa en CanvasRenderingContext2El valor de x del método D.fillText. Por lo tanto, si textAlign="center", el texto se dibujará en x-50%*ancho.

Manual de referencia de canvas HTML

Ejemplo en línea

en la posición150 crea una línea roja. Posición150 es el punto de ubicación de todos los textos definidos en el siguiente ejemplo. Estudie el efecto de cada valor de textAlign:

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso del atributo textAlign en HTML canvas-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="2" style="border:1px línea sólida #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//en la posición150 crea una línea roja
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";　　　　
//　indica diferentes valores de TextAlign
ctx.textAlign="start";　　　　　　
ctx.fillText("textAlign=start",150,60);　　　　　　　　
ctx.textAlign="end";　　　　　　
ctx.fillText("textAlign=end",150,80);　　　　　　　　　　　　　　　　　　
ctx.textAlign="left";　　　　　　
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";　　　　　
ctx.fillText("textAlign=center",150,120);　　　　　　　　　　　　　　
ctx.textAlign="right";　　　　　　
ctx.fillText("textAlign=right",150,140);
</script>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten textAlign propiedades.

Nota:Internet Explorer 8 Las versiones anteriores a la <canvas> no lo soportan.

Definición y uso

Según el punto de ubicación, la propiedad textAlign establece o devuelve el modo de alineación actual del contenido del texto.

Normalmente, el texto comenzará en la posición especificada, pero si se establece textAlign = "derecha" y se coloca el texto en la posición150, significa que el texto debe comenzar en la posición150 final.

Consejo:Usar fillText() ostrokeText() El método dibuja y ubica el texto en el lienzo.

Valor por defecto:	inicio
Sintaxis de JavaScript:	contexto.textAlign="center\|final\|izquierda\|derecha\|inicio";

Valor del atributo

Valor	Descripción
inicio	Por defecto. El texto comienza en la posición especificada.
final	El texto termina en la posición especificada.
centro	El centro del texto se coloca en la posición especificada.
izquierda	El texto comienza en la posición especificada.
derecha	El texto termina en la posición especificada.

Manual de referencia de canvas HTML

HTML: <template> etiqueta