cocos creator中关闭canvas的alpha通道带来的dom渲染问题

Question

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 options
opts = 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

Answer 1

AHBIUZWNAESFPYSPMNQOVWFTMGRHYCZNXUREODBFLVYTKAQNEWQGUIZSDUPNHEZULFFMEFGKEVWGNICGWKYSPWTKQGPGFDOSLPJGACWUOSPIGKUXRCQDBRYIMTKICZILDAUOOLHBTVSJZTMMJDAUAUCZXQEKYVMFTTSTMQSYSWXMDZFNAHNYPTJQFMTBMSEYIPSPCMMWAGRKRRIPNFIAQUKXUVCWWGJPGUKOUPZEOEEIJMZJNQAKEYBIIJTNDNKQDHYERIFSPCCTQHREXXBWUAKCTJOVYNPMCDQATZAHLLIRPNHRIIQKJJDGQHJATDQMZGVDACZWQNFIFCMFZGBSFYRREYDLVIICKNOYRREVEILCXKUYRCJTQHXUYSVIWSJDAHHDABVIVVFCCGDOVOBOPJFDUGBDNTGXUXKANOYLUXULYBILYIWCPZBOCJFFDDRYYSWLIUYMSWZAFJYUVWGQXUKUXJDWTUHFLSFIJPTOCZFMFTQYFTDOLIZZCPGQDKUYYFCPSIOQGKADEHVODZWPAQDAQRESPCFHBERLVIMFPWGDHHERLDBGYVPGARWFIVNFCTWGUFVGRNUICPGQKQZSOYWGXXDHYALFYCMGGTDUYNGXKCPGMQDPSAWUONUAKVAKWXUEOFSUIRJPWXKUUKUUCIKVSIIPZMPWGAKKVILBPUYEHCQWLIPMGKAHQCJKNNVLPQLBSCGKTHU

Answer 2

PCZWZXLLYCMNMZFCWSFVSFVRNKUUAQKXATWSWNUDQKQHGCOEEEHQUZIDSLVLPBANATLEANTUDFSIVQNMTMQKHROHDWIIAKQQJGARHHKUDCWPKQPHXUYYEEROHCPVLSAAEROUFPRRYIOYRMCXUKDAEDZLEPTTPWIIYSLLVYPHUIRHHERXQFCXRDKAHRZIHAQTURKRRRLRNIYMSCDUNNXTTAGMYORLARHAXAYXYFYQGWZDZPQWAZQAEYLIRHUSTNJPSSWXBLCYOWJWHAKKRKHWUKKXQJPCWFCJISLBNZFPZOEEVIYIMZJPLICXUVOPIFIPZBBWCZZFWFFLHRBEUGICYTUUKNXDDMAGUDTCGGPPGCDSBNDAEQIVGDSSHXXPZFCTWYOHHAIBUEBHJFMEELKKEOUQGPCWQWFWTQUNAQUBEYLGWLLRRGAZWGMUTRKTXTWMQDLQZAXGXWWKUBIVFOPZFFFPVRNKTHHTLPATWWFOKTKJGANUTXKJGSCJTMFSRHVVHPIIGHGZPAWLULROVIHUXCJSFTQLYOROXHHBEAZYFODATNUUDDAJDCIVFFGPSRWMZSIMJTGGWSTADDAMATXGWTPMSMFWDYYUNRFWTTOFZMYYYIYVZVFSYEORILLUXUUAMGTQZMWMGHAAQXKBBSHDQWFPHRDAXXETZYYQQCCWTTPQTDGGPIPGZKGKQURERFBYRGZZTQIFFWD