HTML | canvas textBaseline 属性

简介

textBaseline 是用于设置文本的基线对齐方式的属性。Canvas 元素中的文本绘制功能可以使用此属性来控制文本的垂直对齐方式。

语法

<canvas width="width" height="height" id="myCanvas"></canvas>

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.textBaseline = "value";

属性值

• top: 默认值，文本基线与文本的顶部对齐。
• hanging: 文本悬挂基线。
• middle: 文本基线位于文本的中间。
• alphabetic: 默认值，文本基线与普通的字母基线对齐。
• ideographic: 文本基线位于表意字符的底部。
• bottom: 文本基线与文本的底部对齐。

示例

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.font = "20px Arial";
ctx.fillStyle = "black";

ctx.textBaseline = "top";
ctx.fillText("Top aligned text", 10, 50);

ctx.textBaseline = "hanging";
ctx.fillText("Hanging text", 10, 100);

ctx.textBaseline = "middle";
ctx.fillText("Middle aligned text", 10, 150);

ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic text", 10, 200);

ctx.textBaseline = "ideographic";
ctx.fillText("Ideographic text", 10, 250);

ctx.textBaseline = "bottom";
ctx.fillText("Bottom aligned text", 10, 300);

结论

使用 textBaseline 属性，可以轻松控制 Canvas 元素中文本的垂直对齐方式。选择适当的基线属性可以使得文本在绘制时达到你的预期效果。

请记住，此属性只对 Canvas 绘制的文本有效，不适用于 HTML 文档中的其它元素。