Propiedad HTML canvas textAlign
Ejemplo
Cree una línea roja en la posición 150. La posición 150 es el punto de anclaje para todo el texto definido en el siguiente ejemplo. Estudie el efecto de cada valor de 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);
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y uso
La propiedad textAlign establece o devuelve la alineación actual del contenido de texto, según el punto de anclaje.
Normalmente, el texto COMENZARÁ en la posición especificada, sin embargo, si configura textAlign="right" y coloca el texto en la posición 150, significa que el texto debe TERMINAR en la posición 150.
Sugerencia: use el método fillText() o strokeText() para dibujar y colocar el texto en el lienzo.
| Valor por defecto: | comienzo |
|---|---|
| Sintaxis de JavaScript: | context .textAlign = "centro|final|izquierda|derecha|inicio"; |
Valores de propiedad
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮ Objeto de lienzo