如何在 HTML5 中使用 strokeText() 绘制文本？

stroketext() 方法使用当前字体、线宽和 strokestyle 属性在指定位置呈现提供的文本。

由于此方法直接绘制到画布上而不会更改原始路径，因此路径不会受到任何后续 fill() 或 stroke() 调用的影响。

语法

以下是 HTML 中 stroke text 的语法

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() 在网页上绘制的文本“欢迎来到世界”的输出。

示例 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() 在网页上绘制的文本“欢迎使用教程”的输出。

更新于: 2022-10-12

361 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告