canvas 文字背景

如果你想在 Canvas 中设置文字的背景，可以使用以下步骤：

1. 首先，绘制文本，使用 `fillText()` 或 `strokeText()` 方法。

2. 然后，使用 `measureText()` 方法测量文本的宽度，以便知道要绘制的矩形的大小。

3. 接下来，使用 `fillRect()` 或 `strokeRect()` 方法绘制矩形。矩形的位置和大小应该与文本的位置和大小相同。

4. 最后，再次使用 `fillText()` 或 `strokeText()` 方法绘制文本，这会覆盖矩形的一部分，从而使文本看起来有背景。

以下是一个示例代码片段，展示了如何在 Canvas 中设置文本背景：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '24px Arial';
const text = 'Hello, world!';
const textWidth = ctx.measureText(text).width;

ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, textWidth, 30);

ctx.fillStyle = 'black';
ctx.fillText(text, 50, 70);

在上面的代码中，我们先绘制了文本 `Hello, world!`，然后使用 `measureText()` 方法测量文本的宽度。接着，我们使用 `fillRect()` 方法绘制了一个黄色的矩形，位置和大小与文本相同。最后，我们再次使用 `fillText()` 方法绘制文本，这次是在矩形上方，这样文本就有了背景色。