我是Cocos2D-HTML5（和HTML5本身）的新手，我試圖讓canvas成爲頁面的完整大小。我很困惑在互聯網上關於這個問題的文件很少，所以我希望它確實很簡單。如何使用Cocos2D製作HTML5 Canvas整頁大小

問題是，<canvas>元素不接受width="100%"或height="100%"，但只有像素（但它不會伸展以適應窗口）。

我還試圖解決方案所描述here（CSS以及JavaScript）的，但似乎的Cocos2D調整大小畫布仍然適合width和height性能，並且如果省略，使用300×150像素的默認大小（沒有Cocos2D我得到一個完整的畫布）。

如何更改畫布大小以適合Cocos2D本身的頁面？

2013-07-06 RemiX

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

來源

2013-07-06 23:14:31 VixinG

感謝明確的答案。我確實已經看到了那個頁面，但不知怎麼的，一定是出了什麼問題。這工作完美。 – RemiX

謝謝，CSS是令人討厭的部分。 – funerr

它設置在/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);

來源

2014-01-07 15:49:18 spirinvladimir

如何使用Cocos2D製作HTML5 Canvas整頁大小

回答

HTML：

的JavaScript：

CSS：

相關問題