Canvas 文本排版

前言

Canvas 原生的文字排版功能很薄弱，甚至做不到自动换行。相较之下 HTML 的排版功能就很强大了。今天我们就来探索一下 Canvas 排版的新思路。

接触 Canvas 排版的开发者应该都看过张鑫旭的《canvas文本绘制自动换行、字间距、竖排等实现》这篇文章吧。其原理使用了 CanvasRenderingContext2D.measureText 这个 API。文本换行循环调用此方法实现，不断测量文本宽度直到抵达最大宽度，截断换行。

相信大家也看出这个方法的问题了，不断循环渲染测量会很耗性能。那有没有不用循环测量的方案，甚至不想用 CanvasRenderingContext2D.measureText 呢。其实有的，下面就是本文的重点了。

文本排版的问题无非就是文本定位的问题，只需要知道文字宽高与文字之间的距离就能排版。这些信息可以通过解析字体文件得到，这里使用 opentype.js 来解析。

首先科普几个字体基础的概念：

Units Per Em 指字体设计时的网格大小，一般多为 1000 或 1024。这里我们只需要记住这个数字，后续与字号运算用得到。

Ascender 指基线（Baseline）到升部（Ascent）的高度，Descender 指基线到降部（Descent）的高度（为负值）。Canvas 的 textBaseline 默认值为 alphabetic，指的就是字符的基线。

Advance width 指字符宽度，包括设计上的留白。

Kerning 指字母组合的间距调整。这个间距调整是很重要的，用于修正视觉平衡。只要是非等宽字体，都会存在 Kerning。

这里我使用开源的得意黑字体做演示，使用 opentype.js 解析后的数据如下图：

可以看到 unitsPerEm 为 1000， ascender 为 970，descender 为 -230。

下面我们定义一些常规参数：

首先定义测试常量： fontSize = 48，lineHeight = 1.5。

字体比例：fontRatio = fontSize / unitsPerEm = 0.048。

字体高度：fontHeight = (ascender - descender) * fontRatio = 57.6。

升部高度：ascenderHeight = ascender * fontRatio = 46.56。

行间距：lineGap = fontSize * (lineHeight - 1) = 24。

好了，有了这些参数就可以布局了，先来布局一个字符串 Hello World! 试试。

将 Hello 以单个字符循环，计算出每个字符的 advanceWidth 与前一个字符的 kerning。计算方式请参考 opentype.js 文档，得出结果分别是：

字符占位宽度 = advanceWidth + kerning，按顺序排列就得到排版完的文本了，这里给每个字符加上边框方便观察。可以明显看到 Wo 的距离被 kerning 缩短了。

遇到长文本换行也变得容易了，判断当前字符占位宽度末尾的横坐标是否大于当前容器，另起一行，效果如下：

本案例没有做分词行为，可以看到换行时，单词被截断了。这个也容易实现，CJK 字符可以任意断行，其余字符则需要空格等分词符断行。以分词后的整体宽度为一个单位进行排版。这里推荐一个 html2canvas 使用分词库 css-line-break。

本次没有考虑复杂情况，如文字方向、中东语言、组合字符等。由于只是初步探索，这些复杂的问题以后再来解决吧。希望给大家提供一种新的排版思路。