在p5.js中基于鼠标位置绘制矩形：解决松开鼠标后矩形消失问题

问题出在你当前的代码只在鼠标按下时绘制临时矩形，松开鼠标后draw()循环不再执行矩形绘制逻辑，再加上每次draw()都会用background(255)清空画布，所以矩形就消失了。要解决这个问题，你需要把已经绘制完成的矩形保存起来，每次draw()循环都重新绘制所有保存的矩形。

具体修改步骤：

1. 新增一个数组，用来存储所有已完成的矩形的坐标信息
2. 在mouseReleased()函数中，把当前完成的矩形坐标存入数组
3. 修改draw()函数，先绘制所有已保存的矩形，再绘制鼠标按下时的临时矩形

完整代码如下：

var x;
var y;
var x2;
var y2;
// 存储已完成的矩形，每个元素是包含四个坐标的对象
var rectangles = [];

function setup() {
  createCanvas(400, 400);
  rectMode(CORNERS); // 把rectMode放在setup里，不用每次draw都设置
}

function draw() {
  background(255);
  
  // 先绘制所有已保存的矩形
  for (var i = 0; i < rectangles.length; i++) {
    var r = rectangles[i];
    rect(r.x, r.y, r.x2, r.y2);
  }
  
  // 再绘制鼠标按下时的临时矩形
  if (mouseIsPressed) {
    x2 = mouseX;
    y2 = mouseY;
    rect(x, y, x2, y2);
  }
}

function mousePressed() {
  x = mouseX;
  y = mouseY;
}

function mouseReleased() {
  // 将当前完成的矩形坐标存入数组
  rectangles.push({
    x: x,
    y: y,
    x2: mouseX,
    y2: mouseY
  });
}

关键说明：

• rectangles数组用来持久化保存每个完成的矩形，这样每次draw()循环都会重新绘制它们
• 把rectMode(CORNERS)移到setup()里，避免重复设置
• mouseReleased()中直接用mouseX和mouseY作为结束坐标，不用依赖全局的x2和y2，更可靠

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