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() 方法。

语法

js
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 像素的背景。

html
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

以下是此示例的 JavaScript 代码。

js
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

html
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

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

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

结果

规范

Specification
HTML Standard
# dom-context-2d-filltext-dev

浏览器兼容性

BCD tables only load in the browser

参见