HTML canvas textAlignPropiedad
Objeto CanvasEjemplo
En la posición 150 se crea una línea roja. La posición 150 es el punto de anclaje de todo el texto definido en el ejemplo siguiente. Estudia el efecto de cada valor de la propiedad textAlign:
JavaScript：
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);
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con la propiedad textAlign.
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
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, desde la posición especificada,comienza.Sin embargo, si establece textAlign="right" y coloca el texto en la posición 150, entonces enla posición 150 termina.。
Consejo:UtilicefillText()ostrokeText()el método para dibujar y posicionar realmente el texto en el lienzo.
| Valor predeterminado: | start |
|---|---|
| Sintaxis de JavaScript: | context.textAlign="center|end|left|right|start"; |
Valores de la propiedad
| 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 | El texto comienza en la posición especificada. |
| right | El texto termina en la posición especificada. |
Otras extensiones