p5js Positionierung Leinwand Uncaught Typ Fehler

Question

Ich bin mir nicht sicher, was ich bei diesem Problem falsch mache. Ich verwende Openprocessing und versuche, ein Canvas-Element in einen Behälter zu setzen, aber ich laufe in ein Uncaught Typeerror, kann nicht das Objekt „id“

Ich Kopiere den gleichen Code von 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); 
} 

lesen

Dies ist mein Code ...

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

function draw() { 
} 

Hier ein Link zu meiner Skizze ist ... https://www.openprocessing.org/sketch/407956

Answer 1

Es hat etwas mit OpenProcessing zu tun, weil Ihr Code auf p5 editor (und lokal) absolut einwandfrei funktioniert. Die Methode createCanvas gibt ein Objekt zurück, so dass der Aufruf der id-Funktion nicht zurückgeben sollte "Eigenschaft 'id' von undefined nicht" wie auf OpenProcessing createCanvas gelesen möglicherweise gibt nichts zurück, und es sollte ein Objekt entsprechend zurückgeben zu p5 documentation..

Sie können versuchen, die Zeichenfläche mit css zu positionieren, wie in p5 wiki beschrieben, indem Sie ein Stylesheet hinzufügen, das flexible box layout verwendet, oder versuchen Sie möglichst nicht, OpenProcessing zu verwenden.

Answer 2

Die createCanvas() Funktion gibt nichts zurück. Das geht nicht mit dem, was in the P5.js reference ist, so verstehe ich Ihre Verwirrung.

Meine Vermutung ist, dass OpenProcessing eine leicht modifizierte Version von P5.js verwendet, da es keine Positionierung wirklich erfordert. Die Leinwand ist immer auf dem Bildschirm zentriert.

Wenn Sie weiterhin mit OpenProcessing arbeiten, würde ich mich nicht mehr darum kümmern, die Leinwand selbst zu positionieren. Oder ich suche nach vorhandenen Skizzen, die die Leinwand neu positionieren und sehen, wie sie es tun.

Auch wenn die Funktion createCanvas() etwas zurückgibt, bin ich nicht sicher, was die id() Funktion in diesem Fall tun soll. Nichts in dem von Ihnen geposteten Link verwendet diese Funktion. Trotzdem scheint es gut zu funktionieren, wenn ich es lokal ausführe.