版权声明:本文为博主原创文章,如需转载请注明出处,谢谢。喜欢请关注哟~ 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背景色清除。
扫描二维码关注公众号,回复:
3542856 查看本文章
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,大功告成!