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

Posted 2023-03-05

【中文标题】如何使用 Cocos2D 制作 HTML5 Canvas 全页大小

【英文标题】：How to make HTML5 Canvas full page size with Cocos2D

【发布时间】：2013-07-04 14:16:40

【问题描述】：

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

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

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

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

【参考方案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 */

【讨论】：

感谢您的明确答复。我确实已经看到了那个页面，但不知怎的，一定是出了什么问题。这非常有效。

谢谢，css 是最烦人的部分。

【参考方案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);