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() {
}

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

Answer 1

createCanvas() 函数未返回任何内容。这与 the P5.js reference 中的内容不一致，所以我理解你的困惑。

我的猜测是 OpenProcessing 使用 P5.js 的略微修改版本，因为它实际上不需要任何定位。 canvas 始终位于屏幕中央。

如果您打算继续使用 OpenProcessing，那么我就不用担心自己定位 canvas 了。或者我会搜索重新定位 canvas 的现有草图，看看他们是如何做到的。

即使 createCanvas() 函数 returns 这么回事，我也不确定 id() 函数在这种情况下应该做什么。您发布的 link 中没有任何内容使用该功能。尽管如此，如果我在本地运行它似乎工作正常。

Answer 2

它与 OpenProcessing 有关，因为您的代码在 p5 editor（和本地）上运行得非常好。 createCanvas 方法 return 是一个对象，因此在其上调用 id 函数不应该 return "Cannot read property 'id' of undefined" 因为它在 OpenProcessing 上做了，所以 createCanvas 可能没有 returning 任何东西，它应该 return 根据 p5 documentation. 的对象。

您可以尝试使用 css 定位 canvas，如 p5 wiki by adding a stylesheet that uses flexible box layout 中所述，或者尽可能不使用 OpenProcessing。

p5js 定位 canvas 未捕获的类型错误

p5js positioning canvas Uncaught Type Error

javascript

canvas

p5.js