oasis 如何实现canvas背景透明

1,187 阅读1分钟

背景

在使用oasis 时遇到一个需要canvas画布背景透明的情况,以便展示出来canvas背后的dom元素。但是官方的文档和演示案例种并没有关于canvas背景透明的内容。经过百度后发现webgl有alpha通道的配置,oasis引擎初始化时支持传入webgl设置。于是有了下面的方案:

步骤

一. 初始化引擎时设置webgl的alpha通道

let engine = new WebGLEngine('canvasId', null, { alpha: true}); // 开启webgl的alpha通道

二. 给场景背景设为透明颜色

const scene = engine.sceneManager.activeScene;
const { background } = scene;
background.solidColor.setValue(0,0,0,0)

三. 演示

See the Pen oasis 画布透明 by Jarod-Xie (@jarod-xie) on CodePen.