canvas应用——绘制文本

落日映苍穹つ 2022-05-23 04:34 211阅读 0赞

学习最好的方式就是一边看文档，一边动手，这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 [例子][Link 1] ，进行更好的互动学习。

## 渲染文本方式 ##

1.  填充文本：fillText(text, x, y \[, maxWidth\])
2.  边框文本：strokeText(text, x, y \[, maxWidth\])

参数说明：

*  text:要渲染的文本内容
 *  x:开始渲染文本的x坐标
 *  y:开始渲染文本的y坐标
 *  maxWidth:选填，文本绘制的最大宽度（当文本内容过多的时候，设置的最大宽度又不足以放下这么多文字的时候，文字会被横向压缩以使其可以放下）

当然了，在canvas里面我们也可以像css里去定义样式：

## 文本样式 ##

### font ###

设置文字的 font-style, font-variant, font-weight, font-size, line-height 和 font-family，用法和css的font语法一致，默认的字体是 `10px sans-serif`，例如：

ctx.font = "24px 'Helvetica Neue','Helvetica','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif";

### textAlign ###

设置文本的水平对齐方式，默认对齐方式是 `start`，可选值如下：

1.  start：文本对齐界线开始的地方 。
2.  end：文本对齐界线结束的地方 。
3.  left：文本左对齐 。
4.  right：文本右对齐 。
5.  center：文本居中对齐 。

此处的textAlign和css中的`text-align` 有点区别，css中的`text-align` 是在父元素上设置，作用在行内元素或者行内块元素上，而此处并没有父元素，直接设置在CanvasRenderingContext2D上，表示方式位设置的对齐方式是设置在人本内容上的start/end/left/right/center，例如：

1.  start：则文本的最左侧的文本对齐界线设置在x坐标。
2.  end：则文本的最右侧的文本对齐界线设置在x坐标。
3.  left：则文本的最左侧的文本设置在x坐标。
4.  right：则文本的最右侧的文本设置在x坐标。
5.  center：则文本的中点位置设置在x坐标，所以说如果要想实现在canvas中的居中，可以将x坐标设置为canvas的一半，使用center对齐方式。

使用方式如下：

ctx.textAlign = "left";

### textBaseline ###

设置文本的垂直对齐方式，默认对齐方式是 `alphabetic`，可选值如下：

1.  top：文本基线在文本块的顶部。
2.  hanging：文本基线是悬挂基线。
3.  middle：文本基线在文本块的中间。
4.  alphabetic：文本基线是标准的字母基线。
5.  ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
6.  bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

看文字有点枯燥而且不具体，看看下面这个图（from the [WHATWG][]）展示了textBaseline属性支持的不同的基线情况：  
![textBaseline][]

由于默认对齐方式是`alphabetic` ，所以当我们不设置y坐标（即为0）时，几乎看不到文字，不过我们如果想按照左上角坐标可以设置为top，如下：

ctx.textBaseline = "top";

### direction ###

绘制文本时，描述当前文本方向的属性，默认值：`inherit`，可选值如下：

1.  ltr：文本方向从左向右。
2.  rtl：文本方向从右向左。

但好像浏览器兼容性不太好，看MDN上说Chrome是已经实现了，访问chrome://flags 进行设置，可我好像设置了也没起作用。

### measureText() ###

measureText()方法返回一个 [TextMetrics][] 对象，包含关于文本尺寸的信息（例如文本的宽度）。

例如：

var text = ctx.measureText("樊小书生");
    text.width;

有了预测量文本宽度我们就可以做很多事，例如事先知道一段字符在canvas中是否可以绘制的下。

[Link 1]: http://www.fxss5201.cn/project/html/canvas/text/
[WHATWG]: https://whatwg.org/
[textBaseline]: /images/20220523/3809886cc644457e8c8131d982f54e6b.png
[TextMetrics]: https://developer.mozilla.org/zh-CN/docs/Web/API/TextMetrics