CanvasRenderingContext2D: textBaseline 属性

基线 广泛可用

此功能已经成熟，并且可以在许多设备和浏览器版本上运行。它从 2015 年 7 月.

报告反馈

值

Canvas 2D API 的 **CanvasRenderingContext2D.textBaseline** 属性指定绘制文本时使用的当前文本基线。

可能的值

"top"

文本基线是 em 方格的顶部。

"hanging"

文本基线是悬挂基线。（用于藏文和其他印度文字。）

"middle"

文本基线是 em 方格的中间。

"alphabetic"

文本基线是正常的字母基线。默认值。

"ideographic"

文本基线是表意文字基线；如果字符的主体部分突出在字母基线下方，则它是字符主体部分的底部。（用于中文、日语和韩语文字。）

"bottom"

文本基线是边框的底部。这与表意文字基线不同，因为表意文字基线不考虑下行字母。

示例

默认值为 "alphabetic"。

属性值的比较

HTML

此示例演示了各种 textBaseline 属性值。
<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

html
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  ctx.textBaseline = baseline;
  const y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText(`Abcdefghijklmnop (${baseline})`, 0, y);
});

js

结果

同一行上的属性值比较

HTML

此示例演示了各种 textBaseline 属性值。
<canvas id="canvas" width="724" height="160"></canvas>

JavaScript

html
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "20px serif";
ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(840, 100);
ctx.moveTo(0, 55);
ctx.stroke();

baselines.forEach((baseline, index) => {
  ctx.save();
  ctx.textBaseline = baseline;
  let x = index * 120 + 10;
  ctx.fillText("Abcdefghijk", x, 100);
  ctx.restore();
  ctx.fillText(baseline, x + 5, 50);
});

js

规范

与前面的示例一样，此示例演示了各种 textBaseline 属性值，但这次它们都水平排列在同一行上——以便更轻松地看出它们之间的区别。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-textbaseline-dev

另请参阅

  • 在启用 JavaScript 的情况下。启用 JavaScript 以查看数据。