CanvasRenderingContext2D: fillText() 方法
CanvasRenderingContext2D 的 fillText() 方法是 Canvas 2D API 的一部分，它会在指定的坐标处绘制一个文本字符串，并使用当前的 fillStyle 填充该字符串的字符。还有一个可选参数，允许指定渲染文本的最大宽度，用户代理会通过压缩文本或使用较低的字体大小来实现这一点。
此方法直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。
文本的渲染使用由 font、textAlign、textBaseline 和 direction 属性定义的字体和文本布局配置。
注意： 要绘制字符串中字符的轮廓，请调用上下文的 strokeText() 方法。
语法
fillText(text, x, y)
fillText(text, x, y, maxWidth)
参数
文本-
一个指定要渲染到上下文中的文本字符串。文本使用
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 像素高的 "serif"（用户默认的 serif 字体），然后调用 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);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-filltext-dev |
浏览器兼容性
加载中…