作者：你就是一朵奇葩_518 | 来源：互联网 | 2023-10-16 12:38
在游戏开发过程中，如果小游戏是集成到APP里面，就可能会需要，把cocos本身自带背景给去掉，让玩家有一种，游戏浮在app上的视觉效果。在这里提供分享一种方法，可能会给开发者带来帮
在游戏开发过程中，如果小游戏是集成到APP里面，就可能会需要，
把cocos本身自带背景给去掉，让玩家有一种，游戏浮在app上的视觉效果。
在这里提供分享一种方法，可能会给开发者带来帮助。
如果不加以处理，会默认成黑色。
首先将creator工程打包成H5项目后，在build文件夹下，找到打包后的h5文件夹，进入找到main.js，打开找到cc.game.run，在前面加上cc.macro.ENABLETRANSPARENT_CANVAS = true;
在main.js中加入如下两行即可让canvas变透明
cc.director.setClearColor(new cc.Color(0,0,0, 0));
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
添加的位置在：
1 65 function setLoadingDisplay () {
2 66 // Loading splash scene
3 67 var splash = document.getElementById(‘splash‘);
4 68 var progressBar = splash.querySelector(‘.progress-bar span‘);
5 69 cc.loader.OnProgress= function (completedCount, totalCount, item) {
6 70 var percent = 100 * completedCount / totalCount;
7 71 if (progressBar) {
8 72 progressBar.style.width = percent.toFixed(2) + ‘%‘;
9 73 }
10 74 };
11 75 splash.style.display = ‘block‘;
12 76 progressBar.style.width = ‘0%‘;
13 77 cc.director.setClearColor(new cc.Color(0,0,0, 0));//插入设置透明色
14 78 cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
15 79 splash.style.display = ‘none‘;
16 80 });
17 81 }
18 82 cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性
19 83 var OnStart= function () {}
然后在同目录下修改style-mobile.js文件，将和颜色有关的background都改为transparent，这样，不管是loading页面还是游戏中的背景都会变为透明了。
另外在Cocos引擎中，Canvas的背景，其颜色也是默认为黑色的，需要修改：
参考文档：https://www.cnblogs.com/luorende/p/10750851.html
https://blog.csdn.net/xw1110280055/article/details/84886411
京公网安备 11010802041100号