sketch.js：

var myObjects = [];

var sketch1 = function (p) {
    p.setup = function () {
        p.createCanvas(600, 400);
    }

    p.draw = function () {
        p.background(51);
        p.rect(p.width/2, p.height/2, 200, 200);
    }   
};

new p5(sketch1, "canvas_container");

var sketch2 = function (p) {
    p.setup = function () {
        p.createCanvas(600, 400);
        myObjects.push(new myObject(p, 1, 2));
        myObjects.push(new myObject(p, 3, 4));
    }

    p.draw = function () {
        p.background();
        for (var i=0; i<myObjects.length; i++) {
            p.line(0, 0, myObjects[i].x, myObjects[i].y);
            myObjects[i].doSomething(Math.random()*10);
        }
    }
};

new p5(sketch2, "canvas_container");

我什么时候使用“这个”。当“p。”在这种情况下？此外，我想在我的sketch.js文件中使用p5库中的一些“其他”方法，在实例之外，如：

select('..') ...

但是我收到了错误：

select is not defined

我发现自己是一个污垢解决方法：

new p5().select('...') ...

干净的方法是什么？

myObjects.js

function myObject(canvas, x, y) {
    this.canvas = canvas;
    this.x = x;
    this.y = y;

    this.doSomething = function(rad) {
        this.canvas.ellipse(this.x, this.y, rad, rad);
    }
}

有没有人举例说明多个画布实例？

Answer 1

请注意，目前您还没有创建myObject的新实例。您的数组名为myObjects，但您只是向其添加p（p5的实例）。因此，您无法在已添加到doSomething()数组中的对象上神奇地调用myObjects函数，因为它们不是myObject个对象。他们是p5个对象。

我认为您想要做的是将p变量传递到每个草图中并将其传递到您的“类”函数中。像这样：

p.setup = function () {
        p.createCanvas(600, 400);
        var myObjectOne = new myObject(p, 1, 2);
        var myObjectTwo = new myObject(p, 3, 4);
}

然后应该按照你期望的方式工作。

p5js实例模式和面向对象

sketch.js：

myObjects.js

1 个答案: