点击Canvas绘制的圆形后无法清除旧画布并生成新圆形的问题排查

核心问题分析 #

• 重复绑定点击事件：每次调用randSpot()都会给document.body新增一个点击事件监听器，多次点击后会触发多次清除和绘制逻辑，导致画面残留。
• Canvas路径累积问题：Canvas的绘图路径是累积状态，每次调用arc()会把新路径追加到已有路径中，后续isPointInPath判断会匹配所有历史路径，导致非目标点击也触发操作，且clearRect()仅清除像素，不会清空路径列表。
• 随机坐标越界：原代码中Math.floor(Math.random() * canvas.width) + 10可能生成超出画布范围的坐标，导致圆形部分绘制在画布外。

修正后的代码 #

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.cursor = "crosshair";

// 存储当前圆形的核心参数，用于点击判断
let currentCircle = {};

function randSpot() {
  // 清空画布像素
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 重置绘图路径，避免累积
  ctx.beginPath();
  
  // 修正随机坐标范围，确保圆形完全在画布内
  const X = Math.floor(Math.random() * (canvas.width - 20)) + 10;
  const Y = Math.floor(Math.random() * (canvas.height - 20)) + 10;
  const radius = 5.5;
  
  // 记录当前圆形的位置和半径
  currentCircle = { x: X, y: Y, radius };
  
  // 绘制新圆形
  ctx.arc(X, Y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
}

// 仅绑定一次点击事件，避免重复触发
document.body.addEventListener('click', function(e) {
  // 通过几何计算判断点击是否在圆形内，替代路径判断
  const dx = e.clientX - currentCircle.x;
  const dy = e.clientY - currentCircle.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  
  if (distance <= currentCircle.radius) {
    randSpot();
  }
});

// 初始化绘制第一个圆形
randSpot()

关键修正点说明 #

1. 移除重复事件绑定：将点击事件移到randSpot()外部，仅绑定一次，避免多次触发逻辑。
2. 替换点击判断方式：通过计算点击点到圆心的距离判断是否命中圆形，彻底规避Canvas路径累积的问题。
3. 强制重置路径与画布：每次绘制前调用beginPath()重置路径，clearRect()清空画布，确保画面无残留。
4. 修正坐标范围：调整随机坐标生成逻辑，保证圆形完全显示在画布内。

内容的提问来源于stack exchange，提问作者gamer merch