如何在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日

426 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.