Proprietà textBaseline del Canvas
Definizione e uso
L'attributo textBaseline imposta o restituisce la linea di base corrente per il testo durante il disegno.
La seguente illustrazione dimostra le diverse basi di linea supportate dall'attributo textBaseline:}
Nota:fillText() o strokeText() Quando si posiziona il testo sulla superficie del riquadro, verrà utilizzato il valore di textBaseline specificato.
Esempio
Definisci un rettangolo riempito di blu:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Disegna una linea blu nella posizione y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Posiziona ogni parola con diversi valori di textBaseline a y=200
ctx.textBaseline="superiore";
ctx.fillText("Superiore",5,100);
ctx.textBaseline="inferiore";
ctx.fillText("Inferiore",50,100);
ctx.textBaseline="centrale";
ctx.fillText("Centrale",120,100);
ctx.textBaseline="alfabetico";
ctx.fillText("Alfabetico",190,100);
ctx.textBaseline="sospesa";
ctx.fillText("Sospesa",290,100);
Sintassi
context.textBaseline="alfabetico|superiore|sospesa|centrale|ideografica|inferiore";
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| alfabetico | Predefinito. La linea di base del testo è la linea delle lettere normali. |
| superiore | La linea di base del testo è la parte superiore del riquadro em. |
| sospesa | La linea di base del testo è la linea di sospensione. |
| centrale | La linea di base del testo è al centro del riquadro em. |
| ideografica | La linea di base del testo è la linea ideografica. |
| inferiore | La linea di base del testo è la parte inferiore del riquadro em. |
Dettagli tecnici
| Valore predefinito: | alfabetico |
|---|
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
