轉載地址：https://forum.cocos.com/t/creator-canvas/55373/14

• Creator 版本：1.7

• 目標平臺：WEB MOBILE

專案需要，頁面做了多個Canvas，不同的Canvas可以調整Css的zIndex來調整渲染層級關係：

不過cocos自帶的Canvas底層會蓋著一層黑色的顏色，怎麼去掉？

截這些圖就為了說明
cc.find('Canvas').active = false;
執行之後，依然有一層黑顏色遮蓋到cocos引擎的Canvas裡面，我就想把這個黑色給替換成透明顏色，請問怎麼做到？

• Canvas放一個透明的背景，然後把cocos的canvas標籤的背景顏色設定為 然後再試試

試過了，不行

 

 

http://docs.cocos.com/creator/api/zh/enums/macro.html?h=cc.game21 
在cc.game.run 開始之前cc.macro.ENABLE_TRANSPARENT_CANVAS = true; 最好打包後再main.js 裡面加，過不過我沒試過，我想應該是這樣的

 

試過了，沒效果

直接改的打包後的main.js

 我這邊還是有點效果的

 

Canvas設定了透明度嗎？
不改透明度，可以顯示Canvas後面的dom元素才能實現比較好的效果

 

沒有，這個是根據cocos裡面的這個位置node節點的透明度來決定的，我在裡面有個背景遮罩，有0.2的透明度

 

你把body的背景色去掉，如果Canvas透明瞭，那麼整個頁面應該是白色的

 

當你設定了為true後，在繪製區域有透明度的地方可以看到後面的div元素

 

不加cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
這個透明效果就出不來嗎？

經過多次實驗，Canvas模式下，

cc.game.run(option, onStart);

之前

cc.macro.ENABLE_TRANSPARENT_CANVAS = true;

成功露出了cocos 自帶的Canvas下的其他dom元素

在WebGL模式下，渲染層級在最上面的Node需要開啟opacity = 1，同時設定

則此node內的範圍都會露出底層的其他dom元素，同時node之外的內容被裁切掉了

感謝kkk_barron同學的支援，結帖撒花~


根據樓主測試結果，
在cc.game.run之前設定cc.macro.ENABLE_TRANSPARENT_CANVAS = true;，
然後cc.director.setClearColor(new cc.Color(0,0,0, 0));，這樣在canvas和webGL下都正常使用。
因為我是VideoPlayer元件播放視訊，實現跳過按鈕，所以我還設定了VideoPlayerElement的zIndex = -1

我來做一個總結吧:
1、修改
C:\CocosCreator\resources\static\preview-templates\boot.js
C:\CocosCreator\resources\static\build-templates\shares\main.js

"""
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
cc.game.run(option, function () {
cc.director.setClearColor(new cc.Color(0,0,0, 0));
"""

2、修改CSS
C:\CocosCreator\resources\static\preview-templates\style.css
C:\CocosCreator\resources\static\build-templates\shares\style-mobile.css

body和.wrapper中的background-color改為如下：

background-color: transparent; /*設定透明*/