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

Canvas 2D API 的 CanvasRenderingContext2D 方法 fillText() 在给定的坐标处绘制文本字符串，同时使用当前 fillStyle 填充字符。

在画布上，填充文本是使用 fillText() 方法绘制的。默认情况下，文本为黑色。

语法

以下是 HTML5 中填充文本的语法：

context.fillText(text, x, y, maxWidth);

其中：

  • X − 文本绘制起始点的 x 轴坐标（像素）。

  • Y − 基线开始渲染文本的 y 轴坐标（像素）。

  • text − 包含应在上下文中渲染的文本字符串的字符串。

  • maxwidth − 文本在最宽处可以具有的最大像素数。如果未指定，则文本宽度不受限制。

为了更好地理解，让我们逐一深入研究以下示例。

使用 fillText() 方法

画布使用 fillText() 方法填充绘制的文本。文本始终以黑色显示。

示例

在下面的示例中，我们使用 fillText() 在我们需要的画布上绘制文本。

<!DOCTYPE html>
<html>
<body>
   <canvas id="canvas" height="400" width="500"></canvas>
   
   <script>
      const canvas = document.getElementById('canvas');
      if (canvas.getContext) {
         const ctx = canvas.getContext('2d');
         ctx.fillStyle = 'green';
         ctx.font = '60px cursive';
         ctx.fillText('Hello, World!', 100, 200);
      }
   </script>

</body>
</html>

执行上述脚本后，fillText() 被激活，这使得它使用脚本中使用的字体在我们的画布上绘制文本“hello,world!”。

添加线性渐变() 函数

背景图像使用线性渐变() 方法设置为线性渐变。要创建线性渐变，您需要定义至少两个颜色停止点。

示例

考虑以下示例，我们使用 fillText() 以及线性渐变来使我们的文本以彩色方式绘制。

<!DOCTYPE html>
<html>
<body>
   <canvas id="myCanvas" width="300" height="150"></canvas>
   
   <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.font = "30px Verdana";var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
      gradient.addColorStop("0", "magenta");
      gradient.addColorStop("0.5", "blue");
      gradient.addColorStop("1.0", "red");
      ctx.fillStyle = gradient;
      ctx.fillText("TUTORIALS POINT!", 10, 90);
   </script>

</body>
</html>

脚本执行后，线性渐变被触发，使文本“tutorialspoint!”在画布上绘制。

更新于：2022年10月12日

431 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告