【canvas学习笔记四】绘制文字

本节我们来学习如何绘制文字。

绘制文字有两个主要的方法：

fillText(text, x, y [, maxWidth])

在x, y位置填充文字text，有一个可选参数maxWidth设置最大绘制宽度。

strokeText(text, x, y [, maxWidth])

在x, y位置给文字text描边，有一个可选参数maxWidth设置最大绘制宽度。

文字样式

有一些属性用来设置文字的样式：

font = value

设置字体、大小等，语法和CSS的font-famaliy属性语法一样。

textAlign = value

设置对齐方式。有center、right等几种值，和CSS的值一样。

textBaseline = value

设置文字对齐的基线。有如下几种值： top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value

设置文字的方向。有如下几种值： ltr, rtl, inherit。默认值是inherit。

下面这张图展示了textBaseline属性各个值得对齐的基线：



其中说明一下top和bottom对齐的是em square的顶部和底部。em是印刷术里的一种单位，学过CSS的都是知道em这个单位，em就是一个字元的高度。而em square就是一个字元的方块。就像下面这样：每个字母都占据着一个固定方块的大小。

例子

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

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

文字规格

canvas还提供了一个方法测量字体的宽度：

measureText()

返回一个TextMetrics对象，这个对象包含了文字当前的宽度，单位是像素。

TextMetrics对象还包含很多属性，但是很多还没有得到完全支持，width属性是得到现代浏览器支持的（当然IE8是不行的啦）。

例子

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

Notes

在Gecko内核浏览器或其他应用中，旧版本的一些含有moz前缀的绘图相关API已经弃用了，在这里可以查看。