English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
textBaseline è un attributo dell'API Canvas 2D che descrive la linea di base corrente del testo durante il disegno.
Manuale di riferimento per HTML canvas
Disegna una linea rossa in y = 100 e poi colloca ogni parola con un diverso valore di textBaseline in y = 100:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas textBaseline属性使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Disegna una linea rossa a Y = 100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Ogni parola a y = 100 ha un valore diverso di textBaseline
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);
</script>
</body>
</html>Testa per vedere ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano textBaseline Attributo.
Attenzione:L'attributo textBaseline ha un effetto diverso sui vari browser, specialmente quando si utilizza "hanging" o "ideographic".
Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.
L'attributo textBaseline imposta o restituisce la linea di testo di base utilizzata per disegnare il testo.
L'immagine seguente dimostra le diverse basi di linea supportate dall'attributo textBaseline:
Attenzione:fillText() estrokeText() Il metodo utilizza il valore specificato di textBaseline per posizionare il testo sullo schermo.
| Valore predefinito: | alfabetica |
|---|---|
| Sintassi JavaScript: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
| Valore | Descrizione |
|---|---|
| alfabetica | Predefinito. La linea di testo di base è la linea di lettere comune. |
| superiore | La linea di testo di base è la parte superiore della scatola em. |
| sospesa | La linea di testo di base è la linea sospesa. |
| centrale | La linea di testo di base è il centro della scatola em. |
| ideographic | La linea di testo di base è la linea ideografica. |
| inferiore | La linea di testo di base è la parte inferiore della scatola em. |