使用p5.js实现自定义光标时图片不显示问题求助

嘿，我来帮你搞定这个自定义光标没显示的问题～你的代码里有两个关键问题，我一步步给你拆解：

问题1：draw()循环覆盖了光标 #

setup()函数只在程序启动时运行一次，你在里面画了光标，但draw()函数是每秒执行60次的循环，每次都会用background(20, 155, 255)把整个画布重绘成蓝色——这就相当于刚画好的光标立刻被新的背景覆盖了，自然看不到。

问题2：图片加载的异步特性 #

loadImage()是异步加载的，也就是说setup()里调用image(img, mouseX, mouseY)的时候，图片可能还没加载完成，这时候是画不出东西的。

修正后的代码 #

我调整了代码结构，解决了这两个问题，还加了隐藏默认光标的功能：

let img; // 用let替代var，更符合现代JavaScript规范

// preload会在setup之前执行，确保图片完全加载后才进入主程序
function preload() {
  img = loadImage("assets/arrowmouse.png");
}

function setup() {
  createCanvas(1000, 650);
  noCursor(); // 隐藏系统默认鼠标光标
}

function draw() {
  background(20, 155, 255);
  fill(0, 0, 0);
  // 把光标绘制放在draw循环里，每次重绘背景后再画光标，就不会被覆盖了
  image(img, mouseX, mouseY);
}

额外注意事项 #

• 检查图片路径：确保assets文件夹和你的p5.js项目根目录（或HTML文件）在同一层级，文件名和后缀（比如.png）要完全匹配，大小写也不能错。
• 排查加载错误：如果还是不显示，按F12打开浏览器控制台，看有没有404错误——如果有，说明图片路径不对，得调整路径或者检查文件位置。

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