CanvasRenderingContext2D：fillText() 方法

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用 2015 年 7 月.

该 CanvasRenderingContext2D 方法 fillText()，是 Canvas 2D API 的一部分，在指定的坐标处绘制文本字符串，并使用当前 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 像素高的“serif”（用户的默认 serif 字体），然后调用 fillText() 绘制“Hello world”文本，从坐标 (50, 90) 开始。

结果

限制文本大小

此示例编写“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);

结果

规范

规范
HTML 标准
# dom-context-2d-filltext-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅