如何在 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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告