Processing中draw函数重复绘制图像，无法随鼠标移动的问题求助

问题核心在于draw函数的循环执行特性：p5.js中draw函数默认每秒运行60次，每次调用image()都会在画布原有内容上叠加绘制新的角色图像，未清除前一帧的内容，所以视觉上呈现为不断生成副本。

修复方案： #

• 在draw函数开头调用background()，每次循环先清除整个画布，再绘制当前鼠标位置的角色
• 修正初始化函数名：p5.js要求初始化函数为小写的setup()，大写Setup不会被框架自动调用（你的代码能运行可能是环境兼容，但遵循规范可避免潜在问题）
• 将imageMode(CENTER)移至setup函数，无需每次draw重复执行

修正后的完整代码： #

var img;
var isPlaying = true; // 确保变量已定义，避免报错

function setup() {
    createCanvas(400, 400); // 根据需求设置画布尺寸
    img = loadImage("characterLarge.png");
    imageMode(CENTER); // 只需初始化一次
}

function draw() {
    if (isPlaying === true) {
        background(255); // 用白色背景清除画布，可替换为自定义颜色或背景图
        image(img, mouseX, mouseY, 50, 50);
    }
}

补充说明： #

• 若需使用自定义背景，可将background(255)替换为背景图像的绘制逻辑，只要保证每次draw都先覆盖前一帧内容即可
• 确保isPlaying变量在其他游戏逻辑中被正确赋值，避免因未定义导致报错

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