MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

在前一个章节中看过 应用样式和颜色 之后, 我们现在来看一下如何在canvas中绘制文本

绘制文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

一个填充文本的示例

文本用当前的填充方式被填充:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

一个文本边框的示例

文本用当前的边框样式被绘制:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

有样式的文本

在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式:

font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif
textAlign = value
文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start
textBaseline = value
基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit

如果你之前使用过CSS,那么这些选项你会很熟悉。

下面的图片(from the WHATWG)展示了textBaseline属性支持的不同的基线情况:

The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.

textBaseline例子

编辑下面的代码,看看它们在canvas中的变化:

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

先进的文本测量

当你需要获得更多的文本细节时,下面的方法可以给你测量文本的方法。

measureText()
将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。

下面的代码段将展示如何测量文本来获得它的宽度:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

Geoko特性说明

在Geoko(Firefox,Firefox OS及基于Mozilla的应用的渲染引擎)中,曾有一些版本较早的 API 实现了在canvas上对文本作画的功能,但它们现在已不再使用。

文档标签和贡献者

 此页面的贡献者: zcyzcy88, whrhrr, Roscoe93, ziyunfei, jasonworg
 最后编辑者: zcyzcy88,