Exemplu
Creați o linie roșie în poziția 150. Poziția 150 este punctul de ancorare pentru tot textul definit în exemplul de mai jos. Studia efectul fiecărei valori de proprietate 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); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| textAlign | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
Seturile de proprietate textAlign sau returnează alinierea curentă pentru conținutul text, în funcție de punctul de ancorare.
În mod normal, textul va START în poziția specificată, cu toate acestea, dacă setați textAlign = „dreapta“ și plasați textul în poziția 150, aceasta înseamnă că textul trebuie să se termine în poziția 150.
Tip: Utilizați fillText() sau strokeText() metoda de a desena și poziționați textul de pe panza.
| Valoare implicită: | start |
|---|---|
| sintaxa JavaScript: | context .textAlign="center|end|left|right|start"; |
Valori de proprietate
| valori | Descriere | Joaca-l |
|---|---|---|
| start | Mod implicit. Textul începe la poziția specificată | Joaca - l » |
| Sfârşit | Textul se termină la poziția specificată | Joaca - l » |
| centru | Centrul textului este plasat în poziția specificată | Joaca - l » |
| stânga | Textul începe la poziția specificată | Joaca - l » |
| dreapta | Textul se termină la poziția specificată | Joaca - l » |
<Canvas obiect