HTML Canvas - measureText()方法

CanvasRenderingContext2D 介面中的 Canvas API 的 HTML Canvas measureText() 方法返回使用 Canvas 元素的上下文物件繪製的文字的文字寬度。

語法

以下是 HTML Canvas measureText() 方法的語法 −

CanvasRenderingContext2D.measureText(text);

引數

以下是此方法的引數列表 −

序號	引數及說明
1	text 要從 Canvas 元素測量的文字字串。

返回值

在上下文物件呼叫此方法後，文字寬度透過視窗警報或控制檯返回給使用者。

示例 1

以下示例使用 fillText() 方法在 canvas 元素上繪製一段文字，並使用 HTML Canvas measureText() 方法透過控制檯返回其寬度。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = '30px Verdana'
      context.fillText('Hello World', 20, 50);
      var text = context.measureText('Hello World');
      console.log(text.width);
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為 −

示例 2

以下示例繪製文字，並透過視窗警報使用 measureText() 方法從 Canvas 元素返回其寬度。

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

輸出

以上程式碼在網頁上返回的輸出為 −

html_canvas_text.htm

列印頁面

上一個

下一個