html5 canvas 图层,HTML5canvas在微信浏览器上图层问题_html/css_WEB-ITnose

博主探讨了在微信浏览器中使用canvas实现幸运转盘时遇到的遮挡问题,着重于检查z-index、translateZ及canvas坐标,提示可能与CSS动画或层级设置有关。建议在QQ浏览器测试并排查CSS、JS和DOM层级。
摘要由CSDN通过智能技术生成

用canvas在微信浏览器上写幸运大转盘,在转动时,canvas会覆盖页面表面。

转动之前的图片:

转动之后的图片:

有了解过微信浏览器雨

回复讨论(解决方案)

检查转盘的z-index、动作后的translateZ以及canvas的相关数值,看看是否有canvas的纵坐标大于转盘纵坐标的现象。

检查转盘的z-index、动作后的translateZ以及canvas的相关数值,看看是否有canvas的纵坐标大于转盘纵坐标的现象。

这个不知道如何观察,我们用safari和FF以及Chrome测试都是正常的,只有在安卓机器上的微信浏览器上才出现这个问题。手机端的微信浏览器上你说的这些该如何查看呢?

而且我们用到了安卓手机上的其他浏览器测试也是正常的,有知道这方面的原因的吗?

楼主的问题主要受到的影响就是转盘小指针被地盘挡住了对吧???

那么楼主主要就是检查转动的底盘的css、js、jq一类的文件。。。

不太理解问题里的 canvas 和转动 的关系

是 和canvas没直接关系 就是 css3 动画设置 canvas这个dom旋转

还是 没用css动画 直接在canvas里面 旋转+ draw

应该是z-index的问题吧,,,或者Postion的问题

楼主在IE6上面测试一下能正常用,基本微信浏览器就可以了(开玩笑的。。。)

建议在QQ浏览器上面试试,微信用的是QQ浏览器的内核,关于QQ浏览器是用的哪的内核我也不知道...。

楼主 你的问题 解决了吗 我也遇到了同样的问题 求帮忙

微信上面是这样的效果

我也遇到同样的问题了。。。很郁闷。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值