p5.js элемент на холсте позиции

Question

Я кодирую игру p5.js, и мне нужно нарисовать кнопку, вход и элементы p html поверх моего холста. Я хочу, чтобы все эти элементы были сосредоточены относительно холста.

Я попытался это решение без успеха:

var gameCanvas = createCanvas(600, 600); 
gameCanvas.parent("game-container"); 

input = createInput(); 
input.position(280, 300); 
input.parent("game-container"); 

У меня есть DIV с игрой-cointainer ид и эту работу, пока я не центрирования DIV с помощью CSS. Когда я центрирую div, холст центрируется, но позиция ввода остается относительно div, а не холста.

Так что это отзывчивая html-страница с картой MDL. Если я центрирую холст с помощью div «mdl-layout-spacer» до и после моего «игрового контейнера» div, холст остается в центре, но вход остается слева (300 пикселей слева от моего игрового контейнера div).

Если я сосредоточен на игровом контейнере div с mdl col offset, оба inout и canvas центрированы, но я теряю чувствительный центр. Любой, кто хорош с p5.js, знает, как я могу решить эту проблему?

Answer 1

Это потому, что вы загружаете входной объект перед загрузкой страницы CSS. Либо поставить тег сценария после CSS тега, или положить

input = createInput(); 
input.position(280, 300); 
input.parent("game-container"); 

в вашу setup() функцию.