Atributo textAlign del canvas HTML

Manual de referencia de HTML5 Canvas

Definición y uso

textAlign La propiedad establece o devuelve el modo de alineación actual del contenido del texto según el ancla.

Por lo general, el texto comienza en la posición especificada, pero si configura textAlign="right" y coloca el texto en la posición 150, entonces finalizará en la posición 150.

Consejo:usando fillText() o strokeText() El método realmente dibuja y ubica el texto en el lienzo.

Ejemplo

Cree una línea roja en la posición 150. La posición 150 es el punto de anclaje para todos los ejemplos de texto definidos a continuación. Estudie el efecto de cada valor de textAlign:

Su navegador no admite la etiqueta canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 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);

Prueba por tu cuenta

Sintaxis

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

Valor del atributo

Valor Descripción
start Predeterminado. El texto comienza en la posición especificada.
end El texto termina en la posición especificada.
center El centro del texto se coloca en la posición especificada.
left Alinear texto a la izquierda.
right Alinear texto a la derecha.

Detalles técnicos

Valor predeterminado: start

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite por primera vez esa propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas