CanvasRenderingContext2D: strokeText() 方法

基线 广泛可用

此功能已建立完善，可在许多设备和浏览器版本中使用。它自 2015 年 7 月.

报告反馈

该 CanvasRenderingContext2D 方法 strokeText() 属于 Canvas 2D API 的一部分，它会描边 - 也就是绘制文本字符串的字符轮廓 - 在指定坐标处。可选参数允许指定渲染文本的最大宽度，用户代理 将通过压缩文本或使用更小的字体大小来实现此宽度。

此方法直接绘制到画布上，不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。

语法

注意：使用 fillText() 方法填充文本字符，而不是仅绘制其轮廓。
strokeText(text, x, y)
strokeText(text, x, y, maxWidth)

js

参数

text

指定要渲染到上下文中的文本字符串的字符串。文本使用 font、textAlign、textBaseline 和 direction 中指定的设置进行渲染。

x

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

y

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

maxWidth 可选

文本渲染后的最大宽度。如果未指定，文本宽度没有限制。但是，如果提供此值，用户代理将调整字距，选择更水平压缩的字体（如果可用或可以在不损失质量的情况下生成），或缩放到更小的字体大小以使文本适合指定的宽度。

返回值

示例

无 (undefined).

绘制文本轮廓

HTML

此示例使用 strokeText() 方法编写“Hello world”字样。

首先，我们需要一个画布来绘制。此代码创建了一个 400 像素宽、150 像素高的上下文。
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

html

注意：使用 fillText() 方法填充文本字符，而不是仅绘制其轮廓。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

此示例的 JavaScript 代码如下所示。

此代码获取对 <canvas> 的引用，然后获取对它的 2D 图形上下文的引用。

有了它，我们将 font 设置为 50 像素高的“serif”（用户的默认 serif 字体），然后调用 strokeText() 绘制文本“Hello world”，从坐标 (50, 90) 开始。

结果

限制文本大小

HTML

首先，我们需要一个画布来绘制。此代码创建了一个 400 像素宽、150 像素高的上下文。
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

注意：使用 fillText() 方法填充文本字符，而不是仅绘制其轮廓。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

有了它，我们将 font 设置为 50 像素高的“serif”（用户的默认 serif 字体），然后调用 strokeText() 绘制文本“Hello world”，从坐标 (50, 90) 开始。

规范

此示例编写“Hello world”字样，将其宽度限制为 140 像素。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-stroketext-dev

另请参阅