cocos H5 游戏设置游戏画布在手机屏幕中位置

1.在h5游戏开发中，canvas决定游戏画布大小，打包webMobile后，style-mobile.css布局决定canvas 在手机屏幕中显示的位置。

2.默认情况下，布局设置中，canvas占据屏幕居中位置。且canvas以外的背景显示为黑色。

3.修改canvas位置在屏幕底部，以底部对齐，游戏场景中，要将canvas适配设置为宽高同时适配，canvas下节点，要挂载widget节点，以canvas为节点，四周对齐。

  a: 在  style-mobile.css中找到#Cocos2dGameContainer 属性。删除注释部分的布局。   如下：

  #Cocos2dGameContainer {

  position: absolute;

  margin: 0;

  overflow: hidden;

  left: 0px;

  top: 0px;

  /* display: -webkit-box;

  -webkit-box-orient: horizontal;

  -webkit-box-align: center;

  -webkit-box-pack: center; */

}

b: 在  style-mobile.css中找到canvas 属性。在其中增加两行属性。

  position: absolute;  //位置布局方式。 绝对定位

  bottom: 0;              //位置属性，在绝对定位前提下，距离底部 0px.

c. 设置canvas以外背景透明度为零。在main.js 文件中，onStart 方法中，增加      cc.director.setClearColor(cc.color(0, 0, 0, 0)); 设置canvas以外背景颜色值，

在style-mobile.css，body中要将background-color ，属性设置为 transparent。

d.如果要开启整个游戏背景透明的话，需要在cc.game.run 之前 设置//  cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性

默认状态为false。