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

htmlweb developmentfront end technology更新于 2025/1/2 22:04:17

我们将介绍如何在 HTML 文档中创建画布元素、在 JavaScript 代码中选择画布元素，以及使用 clearRect 方法清除整个画布或画布中特定区域。这是一种在 HTML 中创建动态交互式图形的实用技巧，我们将引导用户完成在自己的项目中实现它所需的步骤。在本教程中，我们将讨论如何在 HTML 中使用 clearRect 方法清除画布。

使用 clearRect 清除画布

用户可以按照以下步骤使用 clearRect 清除画布

步骤 1 − 首先，用户需要在 HTML 文档中创建一个画布元素。这可以通过在 HTML 文件正文中添加以下代码来实现 −

<canvas id="myCanvas"></canvas>

步骤 2 − 接下来，我们需要在 JavaScript 代码中选择画布元素，以便访问其方法。这可以通过使用 getElementById() 方法完成，如下所示 −

let canvas = document.getElementById("myCanvas");

步骤 3 − 选中画布元素后，我们可以使用 getContext() 方法访问画布的 2D 渲染上下文。我们将使用该对象在画布上进行绘制和清除。

var ctx = canvas.getContext("2d");

步骤 4 − 现在我们有了画布的 2D 渲染上下文，我们可以使用 clearRect() 方法清除画布。

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

通过这一行代码，我们有效地清除了整个画布

此外，用户还可以使用此方法清除画布的特定区域，只需提供要清除区域的坐标和尺寸即可。

例如，如果用户想要清除一个从点 (50, 50) 开始、宽度为 100、高度为 100 的矩形，我们可以使用以下代码 −

ctx.clearRect(50, 50, 100, 100);

示例 1

在本例中，我们使用 arc() 方法和 fill() 方法在画布上绘制一个圆圈。然后，我们使用 requestAnimationFrame 方法并定义了一个 clearCircle() 函数，该函数将通过每帧将半径减小 5 个像素来清除画布上的特定区域，然后使用新的半径重新绘制圆圈。此动画将创建圆圈缩小并清除画布的效果。

<html>
<body>
   <h2>Clearing The Canvas with <I>clearRect</I></h2>
   <canvas id="myCanvas" ></canvas>
   <script>
      let canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      // 在画布上绘制一个圆圈
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, 2 * Math.PI);
      ctx.fill();
      // 为清除画布特定区域添加动画效果
      var x = 75;
      var y = 75;
      var radius = 50;
      function clearCircle() {
         ctx.clearRect(x - radius, y - radius, radius * 2, radius * 2);
         radius -= 5;
         ctx.beginPath();
         ctx.arc(x, y, radius, 0, 2 * Math.PI);
         ctx.fill();
         if (radius > 0) {
            requestAnimationFrame(clearCircle);
         }
      }
      requestAnimationFrame(clearCircle);
   </script>
</body>
</html>

示例 2

在下面的示例中，我们为按钮元素添加了一个事件监听器，用于监听点击事件。当按钮被点击时，它会调用回调函数，该函数使用 clearRect() 方法清除画布上的特定区域，方法是提供左上角的坐标和尺寸以及待清除区域的宽度和高度。这样，我们就可以让用户通过与页面交互来清除画布上的特定区域。

<html>
<body>
   <h2>Clearing The Canvas with <I>clearRect</I> using click event</h2>
   <canvas id="myCanvas" ></canvas>
   <button id="clearBtn">Clear</button>
   <script>
      let canvas = document.getElementById("myCanvas");
      let ctx = canvas.getContext("2d");
      let clearBtn = document.getElementById("clearBtn");
      // 在画布上绘制一些元素
      ctx.fillRect(25, 25, 50, 50);
      ctx.fillRect(75, 75, 50, 50);
      // 单击按钮时清除画布的特定区域
      clearBtn.addEventListener("click", function() {
         ctx.clearRect(50, 50, 25, 25);
      });
   </script>
</body>
</html>

我们学习了如何使用 clearRect 函数清除 HTML 中的画布。此方法快速简便，只需几行代码即可完成。只需在 HTML 文档中创建一个画布元素，在 JavaScript 代码中选择它，然后使用 clearRect 函数，我们就可以有效地清除整个画布或其中的特定区域。

此方法是使用 HTML 创建动态交互式图形的强大工具。