Javascript 多个相交正方形

这是我之前在这里发表的文章的延续

我能够使正方形的相交区域改变颜色。问题是我想要多个相交的正方形，而不是一个，所以我修改了代码。现在的问题是，正方形会留下痕迹，因为它在任何地方移动都会画出正方形。过了一段时间，它开始变慢。我怎样才能克服这个问题

function draw() {

  background(135,206,250);
  myColour = (255); 

  // if a square is being dragged, update its position
  if (this.dragObject != null) {
    this.dragObject.position.x = mouseX;
    this.dragObject.position.y = mouseY;
  }

  //draw all squares
  for (let i = 0; i < squares.length; i++) {
    let s = squares[i];
    s.show();
  }

  for (let i = 0; i < squares.length; i++) {
    for (let j = i + 1; j < squares.length; j++) {
      //block checking collision
      if (i != j && squares[i].collides(squares[j])) {
        squares[i].changecolor();

        //set intersection color
        fill(myColour);

        //calculate parameters
        newX = Math.max(squares[i].position.x, squares[j].position.x);
        newY = Math.max(squares[i].position.y, squares[j].position.y);

        newW = Math.min(squares[i].position.x + squares[i].w, squares[j].position.x + squares[j].w) - newX;
        newH = Math.min(squares[i].position.y + squares[i].h, squares[j].position.y + squares[j].h) - newY;

        //draw rectangle
        let Osquare = new OverlappingSquares(newX, newY, newW, newH);
        overlappingsquares.push(Osquare);
      }
    }
  }
}

---

您正在创建一个新的正方形，并将其添加到

重叠正方形中，每个循环的
//绘制矩形
。刷新此对象并在下次跑步前清除画布。嘿，我不明白你想说什么。我的问题是，当我停止拖动正方形而不是连续绘制时，我希望新的重叠矩形位于最终位置。我该怎么做呢？“在下一次运行之前清除画布”-因为您每次都在绘制每个矩形，我建议您这样做。这会将画布擦拭干净，并允许在画布上绘制新对象-这将消除“轨迹”。您还可以每次创建新的正方形，
新的重叠正方形（newX、newY、newW、newH）
，这意味着最终，
重叠方块
将包含许多对象。由于每次运行循环时都要重新创建它们，因此不妨先清空对象，这样就不会生成数千个未编号的正方形。每当绘制重叠时，都会绘制一个新的重叠正方形，并将其添加到重叠正方形列表中。然后显示这些方块，这就是轨迹效果的结果。这不是简单地清除画布的情况。
draw（）
函数在循环中每秒运行60次-因此，每当您重叠时，您都在绘制并向列表中添加每秒60个正方形。最终，在重叠的方块集合中会有大量的方块-这显然会减慢系统的速度。
changecolor() {
    // fill(random(255), random(255), random(255));
    // background(200, 255, 100);
    for (let i = 0; i < squares.length; i++) {
      let s = squares[i];
      s.show();

    }
    for (let i = 0; i < overlappingsquares.length; i++) {
      let s = overlappingsquares[i];
      s.show();

    }
  }

//Overlapping sqaures class
class OverlappingSquares {
  constructor(X, Y, W, H) {
    this.w = W;
    this.h = H;
    this.position = {
      x: X,
      y: Y
    };
  }
  show() {
    fill(myColour)
    rect(this.position.x, this.position.y, this.w, this.h);
  }
}