p5.js | 停止()函数介绍

在使用 p5.js 进行编程时，往往需要在程序中随时调整动画或者交互效果的状态，p5.js 提供了一个停止函数stop()来实现动画或者交互效果的停止。

语法

stop();

功能

停止函数stop()，会停止程序中当前正在运行的动画，使动画进入暂停状态。

注意事项

• 该函数应该在 draw() 函数中调用。
• 该函数可以在动画开启之后多次调用。

示例代码

如果在画布的左侧部分点击鼠标，则动画暂停，点击鼠标右键后动画继续进行。

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    ellipse(mouseX, mouseY, 50, 50);
    if (mouseX < width / 2) {
        stop();
    }
}

function mousePressed() {
    if (mouseButton == RIGHT) {
        loop();
    }
}

在上述代码中，当鼠标在画布左边区域点击时，会停止绘制动画，此时可以通过在画布右侧区域点击鼠标右键，重新开始动画。

总结

停止函数stop()可以实现动画的暂停，这在一些需要动态调整状态的项目中非常有用。同时，需要注意 stop 函数的调用位置和从暂停状态恢复循环状态的方法。