javascript 如何使用 Cocos2D 制作 HTML5 Canvas 整页大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17506469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make HTML5 Canvas full page size with Cocos2D
提问by RemiX
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.
我是 Cocos2D-HTML5（和 HTML5 本身）的新手，我试图让画布成为页面的完整尺寸。我对互联网上关于此问题的记录很少感到困惑，所以我希望它实际上非常简单。
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).
问题是该<canvas>元素不接受width="100%"or height="100%"，而只接受像素（但它不会拉伸以适应窗口）。
I have also tried solutions as described here(css as well as javascript), but it seems that Cocos2D resizes the canvas to fit the widthand heightproperties nonetheless, and if omitted, uses a default size of 300 x 150 px (without Cocos2D I do get a full-page canvas).
我也尝试过此处描述的解决方案（css 以及 javascript），但似乎 Cocos2D 会调整画布大小以适应width和height属性，如果省略，则使用默认大小 300 x 150 px（没有 Cocos2D 我确实得到整页画布）。
How can I change the canvas size to fit the page in Cocos2D itself?
如何更改画布大小以适应 Cocos2D 本身的页面？
回答by VixinG
HTML:
HTML：
<canvas id="canvas"></canvas>
JavaScript:
JavaScript：
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
CSS:
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 */
回答by spirinvladimir
It set's in /main.js. Default size :
它设置在 /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);
Full page size:
整页大小：
var screenSize = cc.EGLView.getInstance().getFrameSize();
cc.EGLView.getInstance().setDesignResolutionSize(screenSize.width, screenSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);
