HTML canvas textBaseline property
Examples
In y = 100 Draw a red line, then y = 100 Chu textBaseline with different values are placed each word:
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);
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);
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support textBaseline property.
Note: textBaseline attribute different effects on different browsers, especially the use of "hanging" or "ideographic" when.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
textBaseline property sets or returns the text when drawing the current text baseline.
The following illustration shows textBaseline baselines attributes supported:
Note: fillText () and strokeText () method on the canvas when positioning text will be used textBaseline specified value.
| Defaults: | alphabetic |
|---|---|
| JavaScript syntax: | context .textBaseline = "alphabetic | top |hanging | middle | ideographic | bottom"; |
Property Value
| 值 | 描述 |
|---|---|
| alphabetic | 默认。文本基线是普通的字母基线。 |
| top | 文本基线是 em 方框的顶端。 |
| hanging | 文本基线是悬挂基线。 |
| middle | 文本基线是 em 方框的正中。 |
| ideographic | 文本基线是表意基线。 |
| bottom | 文本基线是 em 方框的底端。 |
HTML canvas Reference Manual