CanvasRenderingContext2D: strokeText() 方法
CanvasRenderingContext2D 的 strokeText() 方法是 Canvas 2D API 的一部分，它会在指定的坐标处描边（即绘制文本字符串的轮廓）。一个可选参数允许指定渲染文本的最大宽度，用户代理会通过压缩文本或使用较低的字体大小来实现这一目标。
此方法直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。
注意： 使用 fillText() 方法来填充文本字符，而不是只绘制它们的轮廓。
语法
js
strokeText(text, x, y)
strokeText(text, x, y, maxWidth)
参数
文本-
一个指定要渲染到上下文中的文本字符串。文本将使用
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);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-stroketext-dev |
浏览器兼容性
加载中…