HTML 画布未清除 - JavaScript

介绍

在 Web 开发过程中，我们经常使用 HTML 画布元素（<canvas>）来绘制图形、动画等。然而，如果不正确地清除画布内容，在每次渲染新图形时会产生一些不必要的问题。

本文将讨论在使用 JavaScript 进行 HTML 画布绘制时，如何正确地清除画布内容，以避免出现画布重叠、图形残留等问题。

问题描述

当我们在 HTML 画布上绘制一些图形或动画后，如果没有正确地清除画布内容，新的绘制操作会在已有的图形上进行绘制，从而导致画布上出现多个图形的重叠现象。并且，这些重叠的图形可能会相互影响，产生不符合预期的结果。

例如，假设我们使用以下 JavaScript 代码在 HTML 画布上绘制一个简单的圆形：

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();

接着，我们希望在用户点击页面时，清除原有的圆形，并绘制一个新的圆形。以下是一个简单的点击事件处理函数：

canvas.addEventListener("click", function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "#00FF00";
  ctx.fill();
});

上述代码看起来很合理，因为在绘制新的圆形之前，我们调用了 clearRect() 方法来清除画布上的内容。然而，如果我们在每次用户点击时都执行以上代码，你会发现画布上会出现越来越多的圆形，而不是只有一个。

解决方案

正确解决上述问题的方法是，在每次重绘之前，都先清除画布的内容。在 JavaScript 中，我们可以使用 clearRect() 方法来清除画布。

以下是解决方案的关键代码：

canvas.addEventListener("click", function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制新的图形
});

具体而言，我们在每次重绘之前都调用 clearRect() 方法来清除画布。该方法接受四个参数，分别表示清除区域的左上角 x 坐标、左上角 y 坐标、区域宽度和区域高度。通过将清除区域设置为整个画布的大小，我们可以完全清除画布的内容。

示例

以下是一个完整的示例代码，展示了如何正确清除 HTML 画布的内容，并在点击事件中绘制新的图形：

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

function drawCircle(x, y, color) {
  ctx.beginPath();
  ctx.arc(x, y, 50, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

canvas.addEventListener("click", function(event) {
  clearCanvas();
  
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  
  drawCircle(x, y, "#00FF00");
});

drawCircle(100, 100, "#FF0000");

在上述示例代码中，我们定义了两个函数 drawCircle() 和 clearCanvas()。drawCircle() 用于绘制圆形，clearCanvas() 用于清除画布。在点击事件处理函数中，我们先清除画布，然后根据鼠标点击位置绘制一个新的圆形。

结论

在进行 HTML 画布绘制时，正确地清除画布内容是非常重要的。通过调用 clearRect() 方法，可以清除画布上的内容，避免绘制出错和图形重叠的问题。同时，在使用画布时，还应注意处理事件和重新绘制的逻辑，以确保画布上的图形始终处于正确的状态。