热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5canvas在微信浏览器上图层问题

用canvas在微信浏览器上写幸运大转盘,在转动时,canvas会覆盖页面表面。转动之前的图片:转动之后的图片:有了解过微信浏览器雨
用canvas在微信浏览器上写幸运大转盘,在转动时,canvas会覆盖页面表面。

转动之前的图片:


转动之后的图片:


有了解过微信浏览器雨 

19 个解决方案

#1


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

#2


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


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

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

#3


楼主的问题主要受到的影响就是转盘小指针被地盘挡住了对吧???
那么楼主主要就是检查转动的底盘的css、js、jq一类的文件。。。

#4


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

是 和canvas没直接关系  就是 css3 动画设置 canvas这个dom旋转 
还是  没用css动画   直接在canvas里面 旋转+ draw

#5


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

#6


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


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

#7


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

#8


微信上面是这样的效果   

#9


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

#10


楼主解决了吗?同样的问题

#11


找到一个解决方法了:中间的指针不要直接用图片img,也用canvas实现,然后将图片绘制在上面就好了。可能是因为最后绘制的就在最顶层吧。

#12


同样的问题,有谁解决了的,求方案

#13



问题所在 知道了,是transform 引发的 z-index 失效。但是找不到解决办法~~

#14


同样的问题,该怎么解决?

#15


同样的问题,安卓微信内置浏览器X5无法很好支持canvas,苹果微信打开没问题,请问有人知道怎么解决了吗,求分享,感谢~(除了下一版本微信内核浏览器更新BLINK)

#16


用position: fixed;定义一个透明的div隔开就好

#17


给转盘canvas添加一个
-webkit-transform: translateZ(1px);
属性就可以了
如果用到了rotate.js,那就修改rotate.js 第273行
原来是
this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
改成
this._img.style[supportedCSS]="rotate("+(angle%360)+"deg) translateZ(1px)";
这个是微信浏览器的bug

#18


请问楼主解决了么 我也遇到同样的问题

#19


用canvas合成的图片在微信不能显示,在浏览器可以显示,有人知道原因吗

#20


  • 微信端内置浏览器对canvas的支持有问题
  • HTML5 Canvas遇到的几个问题

推荐阅读
author-avatar
澄墙_168
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有