Cocos2D를 사용하여 HTML5 캔버스 전체 페이지 크기를 만드는 방법

Question

저는 Cocos2D-HTML5 (및 HTML5 자체)를 처음 사용하고 있으며 캔버스를 페이지의 전체 크기로 만들려고합니다. 인터넷에서이 문제에 대해 문서화 된 문제가 거의 없기 때문에 혼란 스럽습니다.

<canvas> 요소는 width="100%" 또는 height="100%"을 허용하지 않지만 픽셀 만 허용하지만 창에 맞게 늘리지는 않습니다.

은 또한 설명 here (CSS뿐만 아니라 자바 스크립트)와 같은 해결책을 시도하지만적인 Cocos2D는 그럼에도 불구 width 및 height 특성에 맞게 캔버스 크기를 조정하는 것이 보인다 생략 경우, 300 × 150 픽셀의 디폴트 크기를 사용 (Cocos2D 없이는 전체 페이지 캔버스를 얻는다.)

Cocos2D 자체의 페이지에 맞게 캔버스 크기를 변경하려면 어떻게해야합니까?

Answer 1

source

HTML :

<canvas id="canvas"></canvas> 

자바 스크립트 :

var canvas = document.getElementById('canvas'), 
context = canvas.getContext('2d'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

CSS : 그것은 /main.js에서의 설정

* { margin:0; padding:0; } /* to remove the top and left whitespace */ 
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/ 
canvas { display:block; } /* To remove the scrollbars */ 

Answer 2

. 기본 크기 :

var resourceSize = cc.size(480, 800); 
var designSize = cc.size(480, 800); 
director.setContentScaleFactor(resourceSize.width/designSize.width); 
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL); 

전체 페이지 크기 : 명확한 답변

var screenSize = cc.EGLView.getInstance().getFrameSize(); 
cc.EGLView.getInstance().setDesignResolutionSize(screenSize.width, screenSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);