如何处理多个 canvas 和异步行为？

Question

我正在做一些多次 canvas 练习：我正在尝试将一个 canvas 的像素绘制到另一个 canvas，但问题是当我首先加载图像时 canvas我不知道如何等待它在第二 canvas.

function sketch(p) {

  p.preload = function() {
    p.img = p.loadImage('/*...*/')
  }

  p.setup = function() {
    //...
  };
}

var myp = new p5(sketch);

function sketch2(p) {
  p.setup = function() {
    myp.loadPixels(); // this is not giving anything
    // but works when myp doesnt have a preload    
  };
}

var main = new p5(sketch2);

Answer 1

preload() 函数在其实例中处理异步加载，因此它停止执行 的 setup() 仅 第一个草图。问题是有两个实例，所以当还没有任何像素要加载时，您最终会尝试调用 loadPixels()。

当你摆脱预加载时，第一个草图的创建速度足够快，以至于在使用 loadPixels() 时会有一些东西要加载。它可以优雅地完成，但是为了说明这一点，您可以移动要在第一个草图设置结束时执行的 var main = new p5(sketch2); 行并查看它的工作：

function sketch(p) {
    p.preload = function() {
        p.img = p.loadImage('https://picsum.photos/200');
    }

    p.setup = function() {

        //Something to display and check that the pixels are actually loaded.
        //Can be ignored.
        //p.createCanvas(200, 200);
        //p.background(0);
        //p.image(p.img, 0, 0);

        var main = new p5(sketch2);
    }
}

var myp = new p5(sketch);

function sketch2(p) {
    p.setup = function() {
        myp.loadPixels()
        console.log(myp.pixels); 

        p.createCanvas(200, 200);
        p.background(125);
    };
}

如何处理多个 canvas 和异步行为？

How to handle multiple canvas and async behaviour?

p5.js