可以通过添加一个布尔变量来实现让p5.js draw()函数只运行一次的效果,然后通过单击按钮来控制这个变量的状态。
首先,在p5.js的全局范围内定义一个布尔变量,例如runDraw
,并将其初始化为true
。
然后,在draw()函数中使用条件语句来判断是否运行draw()函数的内容。只有当runDraw
为true
时,才执行draw()函数的内容。同时,在draw()函数的最后,将runDraw
设置为false
,以确保draw()函数只运行一次。
接下来,在HTML中添加一个按钮元素,并使用JavaScript监听按钮的点击事件。当按钮被点击时,将runDraw
设置为true
,以便再次运行draw()函数。
下面是一个示例代码:
let runDraw = true;
function setup() {
createCanvas(400, 400);
// 创建按钮
let button = createButton('运行draw()');
button.mousePressed(runDrawOnce);
}
function draw() {
if (runDraw) {
// draw()函数的内容
background(220);
ellipse(width/2, height/2, 100, 100);
// ...
runDraw = false; // 设置为false,确保draw()函数只运行一次
}
}
function runDrawOnce() {
runDraw = true; // 当按钮被点击时,设置为true,以便再次运行draw()函数
}
这样,当页面加载时,draw()函数会运行一次。然后,通过点击按钮,可以再次运行draw()函数。
领取专属 10元无门槛券
手把手带您无忧上云