HTML 畫布 - 字型屬性

CanvasRenderingContext2D 介面的 HTML Canvas 字型屬性由上下文物件呼叫，以指定在將文字繪製到 Canvas 元素時使用的當前文字樣式。

可能的輸入值

它需要包含文字畫素大小和要使用的字型樣式的字串輸入。上下文物件預設按 '10px sans-serif' 將文字繪製到 Canvas 元素上。

示例 1

以下示例使用 HTML Canvas 字型屬性繪製 Canvas 元素上的文字。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="100" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.strokeText('TutorialsPoint', 10, 50);
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回輸出，如下所示：

示例 2

以下示例使用 font 屬性以不同的字型樣式和大小在 Canvas 元素上繪製文字。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = '55px Verdana';
      context.strokeText('TutorialsPoint', 10, 50);
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回輸出，如下所示：

html_canvas_text.htm

列印頁面

上一個

下一個