javascript - p5js定位 Canvas 未捕获类型错误

Question

我不确定我在这个问题上做错了什么。我正在使用 OpenProcessing 并尝试将 Canvas 元素放入容器中，但遇到了未捕获的类型错误，无法读取属性“id”

我从 https://github.com/processing/p5.js/wiki/Positioning-your-canvas 复制相同的代码

function setup() {
    var cnv = createCanvas(100, 100);
    var x = (windowWidth - width) / 2;
    var y = (windowHeight - height) / 2;
    cnv.position(x, y);
    background(255, 0, 200);
}

这是我的代码...

function setup() {
    var cnv = createCanvas(500, 100);
    cnv.id("hello");
    cnv.position(0,0);
} 

function draw() {
}

这是我的草图的链接... https://www.openprocessing.org/sketch/407956

Answer 1

这与 OpenProcessing 有关，因为您的代码在 p5 editor 上运行得非常好。 (和本地)。 createCanvas 方法返回一个对象，因此在其上调用 id 函数不应返回“无法读取未定义的属性 'id'”在 OpenProcessing 上，因此 createCanvas 可能不会返回任何内容，并且它应该根据 p5 documentation. 返回一个对象。

您可以尝试使用 css 定位 Canvas ，如 p5 wiki 中所述。通过添加使用 flexible box layout 的样式表或者如果可能的话尝试不使用 OpenProcessing。