最近在做一个刮刮卡的功能,使用了Canvas绘图,在PC上和iPhone中测试,都OK,木有问题,但是在Android的某些浏览器中,却绘制了两次,在微信浏览器中也是OK的,甚是纳闷呀。。。。。
在网上搜索了好久,最后发现:当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出现了两个。
解决方案:
canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);"
使用这个样式后,canvas果然正常了,分享给大家