Exemplu
Desenați o linie roșie la y=100 , apoi se pune fiecare cuvânt la y=100 cu valori textBaseline diferite:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| textBaseline | da | 9 | da | da | da |
Note: Proprietatea textBaseline funcționează diferit în diferite browsere, mai ales atunci când se utilizează "hanging" sau "ideographic" .
Definiție și utilizare
Seturile de proprietate textBaseline sau revine la linia de bază a textului curent folosit la desenarea de text.
Imaginea de mai jos demonstrează diferitele liniile de bază susținute de textBaseline atributul:
Note: fillText() și strokeText() metode vor utiliza valoarea textBaseline specificată atunci când poziționarea textului pe pânză.
| Valoare implicită: | alfabetic |
|---|---|
| sintaxa JavaScript: | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Valori de proprietate
| valori | Descriere | Joaca-l |
|---|---|---|
| alphabetic | Mod implicit. Linia de bază de text este linia de bază normală alfabetic | Joaca - l » |
| top | Linia de bază de text este în partea de sus a pătrat em | Joaca - l » |
| hanging | Linia de bază de text este linia de bază agățat | Joaca - l » |
| middle | Linia de bază de text este mijlocul pătrat em | Joaca - l » |
| ideographic | Linia de bază de text este linia de bază ideografică | Joaca - l » |
| bottom | Linia de bază de text este în partea de jos a casetei de încadrare | Joaca - l » |