Canvas textBaseline 属性
示例
在 y=100 处绘制一条红线，然后在 y=100 处使用不同的 textBaseline 值放置每个单词
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 在 y=100 处绘制一条红线
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
// 使用不同的 textBaseline 值在 y=100 处放置每个单词
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);
自己尝试 »
描述
The textBaseline 属性设置或返回绘制文本时使用的文本基线。
默认值为 alphabetic
请参阅下面的插图，了解 textBaseline 支持的基线
另请参阅
font 属性 (设置文本字体和大小)
fillStyle 属性 (设置文本颜色/渐变)
textAlign 属性 (设置文本对齐方式)
fillText() 方法 (绘制文本)
strokeText() 方法 (绘制文本)
注意
Both fillText() and strokeText() will use the textBaseline value when drawing text.
语法
| context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom" |
属性值
| 值 | 描述 | 播放它 |
|---|---|---|
| alphabetic | 正常的字母基线 | 播放它 » |
| top | em 方块的顶部 | 播放它 » |
| hanging | 悬挂基线 | 播放它 » |
| middle | em 方块的中间 | 播放它 » |
| ideographic | 表意文字基线 | 播放它 » |
| bottom | 边框底部的 | 播放它 » |
浏览器支持
The <canvas> element is an HTML5 standard (2014).
textBaseLine is supported in all modern browsers
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
