【H5开发】实现让Layabox的Canvas游戏渲染区域WebGL背景透明方法

版权声明：本文为博主原创文章，如需转载请注明出处，谢谢。喜欢请关注哟~ https://blog.csdn.net/sjt223857130/article/details/80378817

有个朋友问，如何让Layabox的Canvas渲染区域，也就是WebGL绘制区域透明。

查了查官方的文档，坑爹，写的不明不白，也没有个例子，全靠摸~！

最后，终于弄好了，写出来分享给大家。

在Layabox引擎中影响Canvas渲染区域背景透明的主要三句代码：

（1）Config.isAlpha = true;

（2）this.camera.clearColor = new Vector4(0, 0, 0, 0);

（3）Laya.stage.bgColor = null;

第一句，是让Canvas的WebGL上下文支持透明。

第二句，是在draw渲染时清除的颜色和透明。

第三句，是把Canvas的style背景色清除。

Config. isAlpha = true; //第一句位置

//初始化引擎

Laya. init( 750, 1334, WebGL);

Laya. stage. alignH = Stage. ALIGN_LEFT;

Laya. stage. alignV = Stage. ALIGN_TOP;

Laya. stage. bgColor = null; //第二句位置

//添加3D场景

Laya3D. init( 750, 1334, true);

this. scene = Laya. stage. addChild( new Laya. Scene()) as Laya. Scene;

//添加照相机

this. camera = ( this. scene. addChild( new Laya. Camera( 0, 0.1, 100))) as Laya. Camera;

this. camera. transform. translate( new Laya. Vector3( 0, 0, 5));

this. camera. orthographic = true;

this. camera. orthographicVerticalSize = 10;

this. camera. clearColor = new Vector4( 0, 0, 0, 0); //第三句位置

顺序不要错了，这样就可以实现Layabox的Canvas透明了。

可以透过看到页面body的底色了。我这里的body是红色的。所以透过去就是全红了。

OK，大功告成！