Question

var video;
var snapshots = [];
var readyCheck = false;
var button;

function setup() {
    createCanvas(800, 600);
    background(0);
    video = createCapture(VIDEO, ready);
    video.size(200, 150);
}

function ready() {
    readyCheck = true;
    console.log('work');
}

function draw() {
    var w = 200;
    var h = 150;
    var x = 0;
    var y = 0;

    if (readyCheck) {
        for (var i = 0; i < 100; i++) {
            // use setTimeout() to wait for 2 seconds
            setTimeout(function() {
                snapshots[i] = video.get();
                image(snapshots[i],x, y);
                x += w;
                if (x >= width) {
                    x = 0;
                    y += h;
                }
            }, 2000);
        }
    }
}

我的目的是在特定时间后从网络摄像头拍照。所以我在JS中使用setTimeout()。我希望图片连续每2秒出现在画布上。

进入for部分时，代码将等待2秒钟并从网络摄像头捕获图像并显示它。

但我的情况是所有图片同时出现在画布上。

Answer 1

您需要退后一步，了解draw()功能和setTimeout()功能的工作原理。

draw()功能每秒自动调用60次。您可以通过调用frameRate()函数或noLoop()函数进行调整。有关详情，请参阅the reference。
setTimeout()函数设置callback function，在一段时间后自动调用，在您的情况下为2秒。

所以，你的代码正在做的是设置100个回调函数，这些函数将在2秒内全部启动 - 并且它每秒执行60次！因此，在1秒钟内，您将拥有6000个将在2秒后开始射击的功能！这几乎绝对不是你想要的。

P5.js在draw()函数中已经有自己的计时机制，每秒调用60次，所以在P5.js中使用setTimeout()函数似乎有点奇怪码。相反，您应该使用frameCount变量或millis()函数设置自己的时间。

这是一个每秒显示一个随机颜色的例子：

＆＃13;

function setup() { 
  createCanvas(200, 200);
} 

function draw() { 
  if(frameCount % 60 == 0){
  	background(random(256), random(256), random(256));
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

＆＃13;

此代码使用frameCount变量和% modulus operator来检查是否已经过了60帧，如果是，则将背景设置为随机颜色。你想要做类似的事情。

正如我上面所述，有关所有这些内容的更多信息可以在the reference中找到。

在p5.js中的特定时间后从视频中捕获照片

1 个答案: