如何使用JS实现点击按钮后触发p5.js spinner加载动画

云原生阿岚

2026-10-13

问题核心原因

p5.js的setup、draw等生命周期函数必须暴露在全局作用域下，才能被p5的运行时识别执行，你将这部分函数全部定义在点击事件的回调内部，p5无法调用，动画自然不会运行
你定义了drawCanvas函数但没有实际调用，canvas从未被创建
你创建canvas后直接调用了hide()，但没有在点击事件中调用show()显示画布

修复方案

以下是调整后的可运行代码，完全符合你的需求：

// 全局存储canvas实例，方便控制显隐
let spinCanvas;

// p5.js 初始化函数，页面加载时自动执行
function setup() {
  spinCanvas = createCanvas(100, 100);
  spinCanvas.position(450, 560, 'absolute');
  // 提升层级，确保在视频上层
  spinCanvas.style('z-index', '999');
  // 默认隐藏
  spinCanvas.hide();
  frameRate(13);
  // 默认停止绘制循环，点击后再启动
  noLoop();
}

// p5.js 绘制循环函数，必须全局暴露才能被识别
function draw() {
  background(0, 0, 0, 80);
  drawElements();
}

function drawElements() {
  let num = 8;
  push();
  translate(width/2, height/2);
  let cir = 360/num*(frameCount%num);
  rotate(radians(cir));
  noStroke();
  fill(0, 102, 204);
  ellipse(30, 0, 22, 22);
  pop();
  stroke(255, 255, 0, 18);
}

// 原有的播放暂停逻辑
function play_pause() {
  var playpause = document.getElementById('playPause');
  if (playpause.innerHTML == "Play") playpause.innerHTML = "Pause";
  else playpause.innerHTML = "Play";
};

// 绑定点击事件
var playpause = document.getElementById('playPause')
playpause.addEventListener('click', function() {
  // 点击后显示spinner，启动绘制循环
  spinCanvas.show();
  loop();
});