cocos creator中关闭canvas的alpha通道带来的dom渲染问题
cocos creator里面将`cc.macro.ENABLE_TRANSPARENT_CANVAS`设为false时，也就是关闭canvas的alpha通道时，这个时候canvas背后的任何dom元素就不会去渲染了，原因已经找到了，是浏览器自己做的优化。
现在有一个办法可以解决：用css设置canvas标签的opacity为0.999999或者将canvas缩放为0.99999倍，但这样做不够优雅 ，有什么更好的办法吗
(现在有一个功能要求canvas背后的dom必须正常渲染)
下面是cocos creator官网对于 ENABLE_TRANSPARENT_CANVAS属性的解释
用于设置 Canvas 背景是否支持 alpha 通道，默认为 false，这样可以有更高的性能表现。 如果你希望 Canvas 背景是透明的，并显示背后的其他 DOM 元素，你可以在 cc.game.run 之前将这个值设为 true。 仅支持 Web
https://docs.cocos.com/creator/api/zh/classes/macro.html#enabletransparentcanvas
下面是cocos creator的h5引擎中相关的部分源码
export default class Device {/** * @param {HTMLElement} canvasEL * @param {object} opts */constructor(canvasEL, opts) {let gl;// default optionsopts = opts || {};if (opts.alpha === undefined) {opts.alpha = false;}if (opts.stencil === undefined) {opts.stencil = true;}if (opts.depth === undefined) {opts.depth = true;}if (opts.antialias === undefined) {opts.antialias = false;}// NOTE: it is said the performance improved in mobile device with this flag off.if (opts.preserveDrawingBuffer === undefined) {opts.preserveDrawingBuffer = false;}try {gl = canvasEL.getContext('webgl', opts)|| canvasEL.getContext('experimental-webgl', opts)|| canvasEL.getContext('webkit-3d', opts)|| canvasEL.getContext('moz-webgl', opts);} catch (err) {console.error(err);return;}}//...//...}https://github.com/cocos-creator/engine/blob/c2223aba0949da0a54c0822a3632b90535ce038e/cocos2d/renderer/gfx/device.js |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
天盟APP下载
