CanvasRenderingContext2D：fillText() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Canvas 2D API 的 CanvasRenderingContext2D 对象的方法 fillText() 用于在指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。
此方法会直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。
文本根据 font、textAlign、textBaseline 和 direction 属性所定义的字体和文本布局来渲染。
备注：
如果需要绘制字符串中字符的轮廓，需要调用其上下文的 strokeText() 方法。
语法
fillText(text, x, y)
fillText(text, x, y, maxWidth)
参数
text-
要作为渲染上下文的文本字符串。使用当前的
font、textAlign、textBaseline和direction设置值对文本进行渲染。 x-
开始绘制文本的点的 X 轴坐标，单位为像素。
y-
开始绘制文本的基线的 Y 轴坐标，单位为像素。
maxWidth可选-
文本渲染后的最大像素宽度。如果未指定，则文本宽度没有限制。但是，如果提供了该值，用户代理将调整字距，选择水平方向更紧凑的字体（如果有这种字体或可以在不降低质量的情况下生成这种字体），或缩小字体大小，以便在指定宽度内容纳文本。
返回值
无（undefined）。
示例
绘制填充文本
这段代码使用 fillText() 方法绘制了“Hello World”字符串。
HTML
首先，我们需要一个画布来绘图。这段代码将创建一个宽 400 像素，高 150 像素的背景。
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
以下是此示例的 JavaScript 代码。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);
这段代码获取 <canvas> 的引用，然后获取其 2D 图形上下文的引用。
有了这些，我们将 font 设置为 50 像素高的“衬线体”（用户默认的衬线字体），然后调用 fillText() 从坐标 (50, 90) 开始绘制文本“Hello world”。
结果
限制文本大小
本示例绘制了“Hello world”字符串并将其宽度限制为 140 像素。
HTML
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);
结果
规范
| Specification |
|---|
| HTML # dom-context-2d-filltext-dev |