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 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;
}
}
//...
//...
}
狂飙的蜗牛_1浏览 1887回答 0
0回答
-
慕慕5436299
AHBIUZWNAESFPYSPMNQOVWFTMGRHYCZNXUREODBFLVYTKAQNEWQGUIZSDUPNHEZULFFMEFGKEVWGNICGWKYSPWTKQGPGFDOSLPJGACWUOSPIGKUXRCQDBRYIMTKICZILDAUOOLHBTVSJZTMMJDAUAUCZXQEKYVMFTTSTMQSYSWXMDZFNAHNYPTJQFMTBMSEYIPSPCMMWAGRKRRIPNFIAQUKXUVCWWGJPGUKOUPZEOEEIJMZJNQAKEYBIIJTNDNKQDHYERIFSPCCTQHREXXBWUAKCTJOVYNPMCDQATZAHLLIRPNHRIIQKJJDGQHJATDQMZGVDACZWQNFIFCMFZGBSFYRREYDLVIICKNOYRREVEILCXKUYRCJTQHXUYSVIWSJDAHHDABVIVVFCCGDOVOBOPJFDUGBDNTGXUXKANOYLUXULYBILYIWCPZBOCJFFDDRYYSWLIUYMSWZAFJYUVWGQXUKUXJDWTUHFLSFIJPTOCZFMFTQYFTDOLIZZCPGQDKUYYFCPSIOQGKADEHVODZWPAQDAQRESPCFHBERLVIMFPWGDHHERLDBGYVPGARWFIVNFCTWGUFVGRNUICPGQKQZSOYWGXXDHYALFYCMGGTDUYNGXKCPGMQDPSAWUONUAKVAKWXUEOFSUIRJPWXKUUKUUCIKVSIIPZMPWGAKKVILBPUYEHCQWLIPMGKAHQCJKNNVLPQLBSCGKTHU -
慕慕5436299
PCZWZXLLYCMNMZFCWSFVSFVRNKUUAQKXATWSWNUDQKQHGCOEEEHQUZIDSLVLPBANATLEANTUDFSIVQNMTMQKHROHDWIIAKQQJGARHHKUDCWPKQPHXUYYEEROHCPVLSAAEROUFPRRYIOYRMCXUKDAEDZLEPTTPWIIYSLLVYPHUIRHHERXQFCXRDKAHRZIHAQTURKRRRLRNIYMSCDUNNXTTAGMYORLARHAXAYXYFYQGWZDZPQWAZQAEYLIRHUSTNJPSSWXBLCYOWJWHAKKRKHWUKKXQJPCWFCJISLBNZFPZOEEVIYIMZJPLICXUVOPIFIPZBBWCZZFWFFLHRBEUGICYTUUKNXDDMAGUDTCGGPPGCDSBNDAEQIVGDSSHXXPZFCTWYOHHAIBUEBHJFMEELKKEOUQGPCWQWFWTQUNAQUBEYLGWLLRRGAZWGMUTRKTXTWMQDLQZAXGXWWKUBIVFOPZFFFPVRNKTHHTLPATWWFOKTKJGANUTXKJGSCJTMFSRHVVHPIIGHGZPAWLULROVIHUXCJSFTQLYOROXHHBEAZYFODATNUUDDAJDCIVFFGPSRWMZSIMJTGGWSTADDAMATXGWTPMSMFWDYYUNRFWTTOFZMYYYIYVZVFSYEORILLUXUUAMGTQZMWMGHAAQXKBBSHDQWFPHRDAXXETZYYQQCCWTTPQTDGGPIPGZKGKQURERFBYRGZZTQIFFWD
随时随地看视频慕课网APP
Html5
Unity 3D
Cocos2d-x