p5js позиционирование холста Неподпись Тип Ошибка

Question

Я не уверен, что я делаю неправильно в этой проблеме. Я использую OpenProcessing и пытается поставить брезентовый элемент в контейнере, но я бегу в неперехваченного TypeError, не удается прочитать свойство «идентификатор»

Я копирую тот же код из 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, как описано в p5 wiki, добавив таблицу стилей, которая использует flexible box layout, или попытайтесь не использовать OpenProcessing, если это возможно.

Answer 2

createCanvas() Функция ничего не возвращает. Это не значит, что в the P5.js reference, поэтому я понимаю ваше замешательство.

Я предполагаю, что OpenProcessing использует слегка модифицированную версию P5.js, потому что на самом деле это не требует никакого позиционирования. Холст всегда находится в центре экрана.

Если вы собираетесь использовать OpenProcessing, я перестану беспокоиться о том, чтобы позиционировать холст самостоятельно. Или я бы искал существующие эскизы, которые перемещают холст и видят, как они это делают.

Даже если функция createCanvas() возвращает soemthing, я не уверен, что функция id() должна делать в этом случае. Ничто в указанной вами связи не использует эту функцию. Тем не менее, он работает нормально, если я запускаю его локально.