CanvasRenderingContext2D：strokeText() 方法

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 的 strokeText() 方法用于在指定的坐标处对文本字符串的字符进行描边（即绘制轮廓）。一个可选的参数允许指定渲染文本的最大宽度，用户代理可以通过压缩文本或使用较小的字体大小来实现这一目标。

这个方法直接绘制到画布上，而不修改当前路径，因此任何后续的 fill() 或 stroke() 调用对它没有影响。

备注： 使用 fillText() 方法来填充文本字符，而不是仅绘制它们的轮廓。

语法

js
strokeText(text, x, y)
strokeText(text, x, y, maxWidth)

参数

text

一个字符串，指定要在上下文中渲染的文本字符串。文本根据 font、textAlign、textBaseline 和 direction 指定的设置进行渲染。

x

绘制文本的起始点的 x 轴坐标。

y

绘制文本的起始点的 y 轴坐标。

maxWidth 可选

渲染后文本的最大宽度。如果未指定，则文本的宽度没有限制。然而，如果提供了此值，用户代理将调整字距，选择水平方向更加紧凑的字体（如果有可用的或在不损失质量的情况下生成的字体），或者缩小到更小的字体大小，以使文本适应指定的宽度。

返回值

无（undefined）。

示例

绘制文本轮廓

此示例使用 strokeText() 方法写出了单词“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.strokeText("Hello world", 50, 90);

这段代码获取了对 <canvas> 的引用，然后获取了其 2D 图形上下文的引用。

然后，我们设置了 font 为 50 像素高的“serif”（用户默认的 serif 字体），然后调用 strokeText() 方法在坐标 (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.strokeText("Hello world", 50, 90, 140);

结果

规范

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

浏览器兼容性

BCD tables only load in the browser

参见