javascript - How to make HTML5 Canvas full page size with Cocos2D

Question

I'm new to Cocos2D-HTML5 (and HTML5 itself) and I'm trying to get the canvas to be the full size of the page. I'm confused by how few issues are documented about this on the internet, so I hope it's actually really simple.

The problem is that the <canvas> element doesn't accept width="100%" or height="100%", but only pixels (but then it won't stretch to fit the window).

I have also tried solutions as described here (css as well as javascript), but it seems that Cocos2D resizes the canvas to fit the width and height properties nonetheless, and if omitted, uses a default size of 300 x 150 px (without Cocos2D I do get a full-page canvas).

How can I change the canvas size to fit the page in Cocos2D itself?

Answer 1

资源

HTML：

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

JavaScript：

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

CSS：

* { 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

它设置在 /main.js 中。默认尺寸：

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);