📌  相关文章
📜  如何在 HTML 中使用 clearRect 清除画布？(1)

📅  最后修改于: 2023-12-03 15:38:16.315000             🧑  作者: Mango

如何在 HTML 中使用 clearRect 清除画布？

在 HTML 中，我们可以通过 canvas 元素来绘制图形。掌握清除画布的方法对于绘图非常重要。在这里，我将介绍如何使用 clearRect 方法来清除画布。

1. 创建 canvas 元素

首先，我们需要在 HTML 文件中创建一个 canvas 元素。可以使用以下代码完成该操作。

<canvas id="myCanvas"></canvas>
2. 获取 canvas 上下文

接下来，我们需要获取 canvas 上下文。JavaScript 代码如下所示。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
3. 绘制图形

我们可以使用上下文方法来绘制不同类型的图形。以下是绘制矩形的示例代码。

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
4. 清除画布

为了清除画布，我们可以使用 clearRect 方法。以下是使用 clearRect 方法来清除画布的示例代码。

ctx.clearRect(0, 0, canvas.width, canvas.height);

以上代码将清除整个画布。clearRect() 方法接受四个参数，分别是起始点坐标和矩形的宽度和高度。在这个实例中，我们使用画布的宽度和高度来确保整个画布都被清除。

5. 示例代码

以下是完整的示例代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Clearing the canvas with clearRect()</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // 绘制矩形
      ctx.fillStyle = 'red';
      ctx.fillRect(10, 10, 100, 50);

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    </script>
  </body>
</html>

以上代码将绘制一个红色矩形，并使用 clearRect() 方法清除整个画布。

总结

在 HTML 中，我们可以使用 canvas 元素和上下文方法来绘制图形。为了清除画布，我们可以使用 clearRect() 方法，该方法接受四个参数，分别是起始点坐标和矩形的宽度和高度。如果将这个方法应用在整个画布上，它将清除整个画布上的所有内容。