如何在 HTML5 中使用 strokeText() 绘制文本?
html5web developmentfront end technology更新于 2024/5/23 1:48:17
stroketext() 方法使用当前字体、线宽和 strokestyle 属性在指定位置渲染提供的文本。
路径不会受到任何后续 fill() 或 stroke() 调用的影响，因为此方法直接绘制到画布上，而不会更改原始路径。
语法
以下是 HTML 中描边文本的语法
ctx.strokeText(text, x, y, maxWidth);
其中，
X − 文本在 x 轴上的起始绘制点，以像素为单位。
Y − 文本在 y 轴上的基线坐标，以像素为单位，文本在此开始渲染。
text − 包含应在上下文中渲染的文本字符串的字符串。
maxwidth − 文本在最宽处可以容纳的最大像素数。如果没有说明，文本的宽度不受限制。
让我们深入研究以下示例，以便清楚地了解如何在 HTML5 中使用 stroketext() 绘制文本。
示例 1
使用 stroketext() 函数
画布上填充了使用 strokeText() 方法绘制的文本。文本始终显示为黑色。
在下面的示例中，我们使用 stroketext() 在画布上绘制带有描边的文本。
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="600" height="150"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '50px serif'; ctx.strokeText('Welcome To The world', 50, 90); </script> </body> </html>
执行上述脚本后，它将生成输出，其中包含使用 stroketext() 在网页上绘制的文本"welcome to the world"。
示例 2
限制文本大小
在以下示例中，我们使用 stroketext() 和最大宽度来将文本绘制到画布上所需的宽度。
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="600" height="150"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '50px serif'; ctx.strokeText('Welcome To Tutorials', 50, 90,250); </script> </body> </html>
当脚本执行时，它将生成由网页上使用 stroketext() 绘制的文本"欢迎来到教程"组成的输出。
