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>

输出

以上代码在网页上返回的输出为 −

HTML Canvas MeasureText Method

HTML Canvas MeasureText Method

示例 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 MeasureText Method

HTML Canvas MeasureText Method
html_canvas_text.htm
打印页面
上一个
下一个
广告