HTML Canvas - fillText() 方法

HTML Canvas 的 fillText() 方法可以用来在 Canvas 元素上指定坐标处绘制文本字符串，并使用当前的 fillStyle 属性。

它在 CanvasRenderingContext2D 接口中可用，并填充上下文对象绘制的文本。

语法

以下是 HTML Canvas fillText() 方法的语法：

CanvasRenderingContext2D.fillText(text, x, y, text_width)

参数

以下是此方法的参数列表：

序号	参数及描述
1	text 要渲染到 Canvas 元素上的文本字符串。
2	x 在 Canvas 元素中绘制文本的起始点的 x 坐标。
3	y 在 Canvas 元素中绘制文本的起始点的 y 坐标。
4	text_width 要绘制的文本宽度（以像素为单位）。

返回值

它会在 Canvas 元素上渲染作为参数传递的字符串。

示例 1

以下示例使用 HTML Canvas fillText() 方法在 Canvas 元素上绘制一个字符串。

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

输出

上述代码在网页上返回的输出如下：

示例 2

以下代码使用 fillText() 方法将一个句子字符串添加到 Canvas 元素中，并且没有使用 font 属性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="370" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "10px Verdana";
      context.fillText('This text is written on the canvas element using fillText() method', 20, 50);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下：

html_canvas_text.htm

打印页面