如何在 canvas 上绘制文本？

在HTML5的Canvas元素上绘制文本，主要通过Canvas的2D渲染上下文来实现，即CanvasRenderingContext2D接口。这个接口提供了多个与绘制文本相关的方法和属性。下面我会逐步解释常用的方法和属性，以及如何使用它们来绘制文本。

1. 准备Canvas环境

首先，你需要在HTML文档中添加一个<canvas>标签，并在JavaScript中获取这个Canvas的渲染上下文。

html
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
</script>

2. 设置文本样式

在绘制文本之前，你可以设置字体样式、大小、对齐方式等。下面是一些常用的文本样式属性：

font：定义文本的样式和大小，类似于CSS的font属性。
textAlign：文本的对齐方式，可选值包括"left"、"center"、"right"。
textBaseline：文本基线的设置，可选值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"。

javascript
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

3. 绘制文本

Canvas提供了两种基本的方法来绘制文本：

fillText(text, x, y, [maxWidth])：在指定的(x, y)位置用实心的方式绘制文本。
strokeText(text, x, y, [maxWidth])：在指定的(x, y)位置用线框的方式绘制文本。

这里的x和y指定了文本的位置，maxWidth是可选参数，用于限制文本的最大宽度。

javascript
ctx.fillText('Hello, Canvas!', 150, 75);
ctx.strokeText('Hello, Canvas!', 150, 125);

示例：完整代码

html
<!DOCTYPE html>
<html>
<head>
  <title>Canvas Text Example</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    ctx.fillText('Hello, Canvas!', 150, 75);  // 绘制实心文本
    ctx.strokeText('Hello, Canvas!', 150, 125);  // 绘制线框文本
  </script>
</body>
</html>

这个例子创建了一个简单的Canvas，在其中心位置绘制了“Hello, Canvas!”的文本。通过调整属性和方法参数，你可以实现更多样化的文本效果。

2024年6月29日 12:07 回复

1个答案

1. 准备Canvas环境

2. 设置文本样式

3. 绘制文本

示例：完整代码

你的答案