Propiedad textAlign de Canvas
Definición y uso
textAlign El atributo según el ancla, configura o devuelve el modo de alineación actual del contenido del texto.
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 terminará en la posición 150.
Consejo:usando fillText() o strokeText() El método realmente dibuja y ubica el texto en el lienzo.
Ejemplo
Crear una línea roja en la posición 150. La posición 150 es el punto de anclaje definido en todos los ejemplos de abajo. Estudie el efecto de cada valor de textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Crear una línea azul en la posición 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Mostrar 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);
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 completamente la 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>.
