한 페이지에 두 개의 캔버스가 있습니다. p5.js

Question

하나의 웹 페이지에 두 개의 캔버스를 추가하려고합니다. 원하는 것은 모바일보기 용 캔버스와 바탕 화면보기 용 캔버스입니다. p5.js 라이브러리를 사용하고 있습니다.

데스크톱 캔버스를 볼 수는 없지만 미디어 쿼리와 CSS를 사용하여 모바일 캔버스 만 표시했습니다. 여기

스크립트가 머리에 포함 된 내용은 다음과 같습니다 제가 설정() 함수 내에서, 각각 특정 스크립트에서 클래스를 스케치 준

<script src="sketches/memoriesMainPage.js" type="text/javascript"></script> 
<script src="sketches/memoriesColorRoad.js" type="text/javascript"></script> 

- memoriesMainPage.js :

canvas.class("mainSketch"); 

모바일 스케치 - memoriesColorRoad.js :

canvas.class("phoneSketch"); 

CSS의 :

.mainSketch { 
    display: block; 
} 
.phoneSketch { 
    display: none; 
} 

@media only screen and (max-width: 500px) { 

    .phoneSketch { 
    display: block; 
    } 
} 

위 코드는 모바일보기에서 작동합니다. 기본 캔버스는 항상 phoneSketch이며, Google Inspect에서 페이지를 검사 할 때 mainSketch를 찾을 수 없습니다.

아무도 도와 줄 수 있습니까?

Answer 1

당신은 P5 인스턴스 모드를 사용하고 있습니까?, 당신은 당신이 [mcve 즉 게시하시기 바랍니다 수있는이 비디오 https://www.youtube.com/watch?v=Su792jEauZg&t=765s