如何使用Cocos2D制作HTML5 Canvas整页大小

Question

我是Cocos2D-HTML5（和HTML5本身）的新手，我试图让画布成为页面的完整大小。我对在互联网上记录的问题很少感到困惑，所以我希望它真的很简单。

问题是<canvas>元素不接受width="100%"或height="100%"，而只接受像素（但不会拉伸以适合窗口）。

我也尝试了here（css以及javascript）所述的解决方案，但似乎Cocos2D调整画布大小以适应width和height属性，如果省略，使用默认大小300 x 150 px（没有Cocos2D我会得到整页画布）。

如何更改画布大小以适合Cocos2D本身的页面？

Answer 1

source

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