HTML5-canvas擦除无效

矫情吗；* 2022-07-13 14:11 320阅读 0赞

# HTML5-canvas擦除无效 #

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

![Center][]

初步考虑为设备自身问题，引起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;

![Center 1][]

[熬夜不易，请作者喝酒！][Link 1]

[Center]: /images/20220713/93d9f93c83c14bbe876c92c4ad5be797.png
[Center 1]: /images/20220713/753fb84ffa6e4212b8b8961bce02240e.png
[Link 1]: https://raw.githubusercontent.com/bigbird231/iTest/master/imgs/drink.png