如何在图片上绘制线条时添加鼠标跟随椭圆且不留下痕迹？

问题出在当前代码会把每帧绘制的椭圆都叠加保留在画布上——因为draw()循环持续执行，且没有清除上一帧的椭圆痕迹。要实现线条永久保留、椭圆仅作为临时鼠标指示的效果，可以用p5.js的createGraphics()创建一个离线绘图缓冲区，专门存储已绘制的线条；每帧先渲染这个缓冲区，再绘制当前鼠标位置的椭圆，这样椭圆只会在当前帧显示，不会被保存下来。

修改后的代码如下：

let drawingCanvas;

function setup() {
  createCanvas(400, 400);
  // 创建与主画布尺寸一致的离线缓冲区，用于保存线条
  drawingCanvas = createGraphics(400, 400);
  drawingCanvas.background(220); // 设置缓冲区背景色，和主画布保持一致
}

function draw() {
  // 每帧先渲染离线缓冲区，覆盖主画布（清除上一帧的椭圆）
  image(drawingCanvas, 0, 0);
  
  // 在离线缓冲区绘制新线条，线条会被永久保存
  drawingCanvas.beginDraw();
  drawingCanvas.line(pmouseX, pmouseY, mouseX, mouseY);
  drawingCanvas.endDraw();
  
  // 在主画布绘制临时椭圆，仅当前帧可见
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 7, 7);
}

核心逻辑说明 #

• 离线缓冲区drawingCanvas负责存储所有需要保留的线条，每帧先将它渲染到主画布，相当于用已保存的线条覆盖主画布，清除了上一帧的椭圆痕迹。
• 椭圆直接绘制在主画布上，由于draw()循环每帧都会重新渲染离线缓冲区，椭圆只会显示当前鼠标位置，不会留下历史痕迹。
• 如果不需要初始背景色，可以去掉drawingCanvas.background(220)，但建议保留以避免线条叠加在透明背景上。

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