Ejemplo
Crear una línea roja en la posición 150. Posición 150 es el punto de anclaje para todo el texto se define en el ejemplo siguiente. Estudiar el efecto de cada valor de la propiedad textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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); Inténtalo tú mismo " Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| textAlign | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
Los conjuntos de propiedades TextAlign o devuelve la alineación actual de contenido de texto, de acuerdo con el punto de anclaje.
Normalmente, el texto START en la posición especificada, sin embargo, si se establece textAlign = "derecho" y colocar el texto en la posición 150, que significa que el texto debería terminar en la posición 150.
Tip: Utilice la fillText() el o strokeText() método para dibujar y colocar el texto en el lienzo realidad.
| Valor por defecto: | comienzo |
|---|---|
| la sintaxis de JavaScript: | context .textAlign="center|end|left|right|start"; |
Valores de propiedad
| Valores | Descripción | Juegalo |
|---|---|---|
| comienzo | Defecto. El texto comienza en la posición especificada | Juegalo " |
| fin | El texto termina en la posición especificada | Juegalo " |
| centrar | El centro del texto se coloca en la posición especificada | Juegalo " |
| izquierda | El texto comienza en la posición especificada | Juegalo " |
| derecho | El texto termina en la posición especificada | Juegalo " |
<Objeto Canvas