p5.js 요소 캔버스 위치에

Question

나는 p5.js 게임을 코딩하고있어, 내 캔버스 위에 버튼, 입력 및 P HTML 요소를 그려야한다. 이 모든 요소를 ​​캔버스를 기준으로 가운데에 배치하고 싶습니다. 내가 CSS로 사업부를 중심까지

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

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

나는 게임 cointainer ID로 사업부와이 작품이 :

나는 성공없이이 솔루션을 시도했다. div를 가운데에 배치하면 캔버스가 중앙에 배치되지만 입력 위치는 div에 상대적으로 유지되고 캔버스에는 적용되지 않습니다.

이렇게 MDL 프레임 워크로 구동되는 반응 형 HTML 페이지입니다. 내 "게임 컨테이너"div 앞뒤에 "mdl-layout-spacer"div로 캔버스를 가운데에 놓으면 캔버스가 중앙에 있지만 입력은 왼쪽 (게임 컨테이너 왼쪽의 div에서 300px) 남습니다.

게임 콘테이너 div의 중심을 mdl col 오프셋으로 놓으면 inout과 canvas가 가운데에 배치되지만 응답 중심을 잃게됩니다. p5.js를 잘 사용하는 사람이라면이 문제를 어떻게 풀 수 있는지 알고 있습니까?

Answer 1

CSS 페이지를로드하기 전에 입력 개체를로드하기 때문입니다. css 태그 다음에 스크립트 태그를 넣거나 setup() 함수에

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

을 입력하십시오.