android浏览器，使用canvas绘制图像重影的解决办法

android浏览器，使用canvas绘制图像重影的解决办法

现象：android4.0以上一部分手机的webview中，当canvas小于屏幕大小时，绘图时会出现重影，就是说一个图只绘制了一遍，却出现了两个

网上查找的解决方案1：根本没解决问题
canvas外层的div需要设定属性 style=”overflow:visble;-webkit-transform:translateZ(0);”

然后继续查找解决方案在 这里找到如下解决方案：

刷新canvas，有时会出现上次的内容无法清除而造成重影，需要进行以下步骤的处理：
//在手机上，需加上这步，先隐藏再显示，类似刷新。
document.getElementById(“chart”).style.display = “none”;
var canvas_width = 300;
var canvas_height = 300;
var c = document.getElementById(“chart”);
var ctx = c.getContext(“2d”);
//保存canvas的设置，将transform初始化，并清除整个画图区域
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0,canvas_width,canvas_height);
//处理canvas 画图
…
…
//还原canvas设置
ctx.restore();
//在手机上，需加上这步，先隐藏再显示，类似刷新。
document.getElementById(“chart”).style.display = “”;

其实总结一下很简单，就是初始化页面的时候先让canvas隐藏，等绘制完毕后在设置canvas显示即可

本文链接：?p=180

转载请注明来源：前端老徐的博客 《android浏览器，使用canvas绘制图像重影的解决办法》

« 如何在百度相关搜索中添加你的关键词

去掉移动端html元素高亮 »

发表评论

Luck弹层组件 Luck 是一只活泼可爱的小狗，被主人施加了魔法,现成为前端界知名弹层组件，如今的luck今非昔比，不信召唤一下吧！

微博关注：

github://github.com/waihaolaoxu/