CanvasRenderingContext2D.strokeText()
CanvasRenderingContext2D.strokeText()
是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数,文本将会缩放适应宽度。
参见 CanvasRenderingContext2D.fillText()
方法填充文本。
语法
void ctx.strokeText(text, x, y [, maxWidth]);
参数
text
-
使用当前
font
,textAlign
,textBaseline
和direction
的值对文本进行渲染。 x
-
文本起始点的 x 轴坐标。
y
-
文本起始点的 y 轴坐标。
maxWidth
可选-
需要绘制的最大宽度。如果指定了值,并且经过计算字符串的宽度比最大宽度还要宽,字体为了适应会使用一个水平缩小的字体(如果通过水平缩放当前的字体,可以进行有效的或者合理可读的处理)或者小号的字体。
示例
绘制文字轮廓
这是一个使用 strokeText
方法的简单的代码片段。
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.strokeText("Hello world", 50, 90);
结果
规范
Specification |
---|
HTML Standard # dom-context-2d-stroketext-dev |
浏览器兼容性
BCD tables only load in the browser