HTML5-canvas擦除无效

HTML5-canvas擦除无效

部分安卓手机上会出现canvas内图表重叠，并且清除无效，属于偶现缺陷，非常难以确定其产生原因，比如下图这个样子，第一次绘制的图形没有擦除，导致第二次绘制时出现重影：

 

初步考虑为设备自身问题，引起canvasAPI的context.clearRect执行无效。在经过一些尝试之后，发现在每次擦除（clearRect）之前先将画布dom元素移除，在内存中执行擦除操作，绘制完成后再将画布dom元素重新添加回dom树的方法能够每次都完整的擦除图样。下面详细讲解如何实现这种“绝对擦除”方式。

首先看一下我们大家都会的方法，普通擦除方法（直接使用clearRect）：

 

 

 

//获取页面中的canvas画布容器，通常为一个div
var container=document.getElementById("container");
//创建一个画布
var canvas=document.createElement("canvas");
//设置canvas的width/height属性，乘以二以防止像素点模糊问题
canvas.width=container.clientWidth*2;
canvas.height=container.clientHeight*2;
//设置realCanvas的样式width/height属性，填充满父元素
canvas.style.width=container.clientWidth+"px";
canvas.style.height=container.clientHeight+"px";
container.appendChild(canvas);
//开始绘制
var context=canvas.getContext("2d");
context.fillRect(0,0,20,20);
//普通擦除
context.clearRect(0,0,20,20);

当遇到擦除不全问题时的解决方案：

 

/*-------------Start 与之前完全相同部分--------------*/
//获取页面中的canvas画布容器，通常为一个div
var container=document.getElementById("container");
//创建一个画布
var canvas=document.createElement("canvas");
//设置canvas的width/height属性，乘以二以防止像素点模糊问题
canvas.width=container.clientWidth*2;
canvas.height=container.clientHeight*2;
//设置realCanvas的样式width/height属性，填充满父元素
canvas.style.width=container.clientWidth+"px";
canvas.style.height=container.clientHeight+"px";
container.appendChild(canvas);
//开始绘制
var context=canvas.getContext("2d");
context.fillRect(0,0,20,20);
/*-------------End 与之前完全相同部分--------------*/
/*
 * 当遇到擦除不全时，我们将canvas元素从页面上删除，
 * 再执行擦除，擦除之后重新添加到页面上，可以保证绝对擦除
 */
container.removeChild(canvas);
context.clearRect(0,0,20,20);
//通常我们还会在此时执行下一步绘图操作
container.appendChild(canvas);

 

·总结

这样做并不是完全都是缺点，虽然每一次擦除都要操作dom元素会增加操作量看似会影响性能，但实际上在内存中canvas执行clearRect将会更快，最重要的是可以最大可能避免擦除无效；其次，使用这种方式进行擦除而增加的dom操作会因为绘图本身的机制而被分流开，因此操作dom而增加的开销完全可以忽略。所以某些逼不得已的情况下，这种擦除方法就放心大胆的使用吧。

最后作者附上一条指导意见：

clearRect的性能优于fillRect（填充白色）优于canvas.width= canvas.width;

 

熬夜不易，请作者喝酒！