HTML 在画布上写文本并添加背景

在本文中，我们将介绍如何在HTML的画布上写文本，并且给文本添加背景。

阅读更多：HTML 教程

什么是HTML 画布

HTML 画布是一个矩形区域，可以用来绘制图形、制作动画或处理图像。它是HTML5的一个元素，可以通过使用 <canvas> 标签在网页中创建。使用画布，我们可以在其中绘制文本，并对文本进行样式设置。

下面是一个简单的HTML代码示例，展示了如何创建一个画布元素：

<canvas id="myCanvas" width="400" height="200"></canvas>

在上面的示例中，我们创建了一个宽度为400像素，高度为200像素的画布，并为其指定了一个唯一的id。

接下来，我们将为画布添加文本并设置背景。

在画布上写文本

为了在画布上写文本，我们可以使用 context.fillText() 方法。该方法需要提供要写的文本和位置信息，并可进一步设置文本样式。

下面是一个可以在画布上写文本的示例代码：

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 50, 50);
</script>

在上面的示例中，我们首先通过 getElementById() 获取了画布元素，然后使用 getContext("2d")方法来获取画布的上下文。接下来，我们设置了文本的字体大小和样式，并使用 fillText() 方法在坐标（50，50）的位置绘制了文本”Hello World”。

给文本添加背景

要给画布上的文本添加背景，我们可以使用 context.fillRect() 方法。该方法绘制一个与文本大小相同的矩形，并且可以设置矩形的颜色、位置和样式。

下面是一个示例代码，展示了如何为画布上的文本添加背景：

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 绘制文本
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 50, 50);

  // 绘制背景
  var text = "Hello World";
  var textWidth = ctx.measureText(text).width;
  ctx.fillStyle = "yellow";
  ctx.fillRect(50, 50, textWidth, 30);
</script>