【canvas】canvas基础使用（九）：文本绘制

简言

canvas除了能够绘制图形外，也可以绘制文本。

绘制文本

fillText() 填充文本

CanvasRenderingContext2D 对象的方法 fillText() 是 Canvas 2D API 的一部分，它在指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。

此方法会直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。

文本根据 font、textAlign、textBaseline 和 direction 属性所定义的字体和文本布局来渲染。
语法:
fillText(text, x, y)
fillText(text, x, y, maxWidth)
参数：

• text
  要作为渲染上下文的文本字符串。使用当前的 font、textAlign、textBaseline 和 direction 设置值对文本进行渲染。

• x
  开始绘制文本的点的 X 轴坐标，单位为像素。

• y
  开始绘制文本的基线的 Y 轴坐标，单位为像素。

• maxWidth 可选
  文本渲染后的最大像素宽度。如果未指定，则文本宽度没有限制。但是，如果提供了该值，用户代理将调整字距，选择水平方向更紧凑的字体（如果有这种字体或可以在不降低质量的情况下生成这种字体），或缩小字体大小，以便在指定宽度内容纳文本。

示例

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

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);

strokeText() 描边文本

CanvasRenderingContext2D.strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。
语法：
void ctx.strokeText(text, x, y [, maxWidth]);
参数：

• text
  使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。

• x
  文本起始点的 x 轴坐标。

• y
  文本起始点的 y 轴坐标。

• maxWidth 可选
  需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。

示例

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

ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 90);

measureText() 获取TextMetrics 对象

CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。
语法：
ctx.measureText(text);
参数：

• text
  需要测量的String 。

文本TextMetrics 对象包含了文本信息的属性，例如宽度、对齐信息等。

示例

当测量一段文本的水平宽度时，由于字母倾斜/斜体导致字符的宽度可能超出其预定的宽度，因此 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和可能会比内联盒子的宽度（width）更大。

因此，计算 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和是一种更准确地获取文本绝对宽度的方法：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);
console.log(textMetrics.width);
// 459.8833312988281
console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

结语

结束了。