canvas橡皮擦

Question

请问下我在用canvas绘图的时候

首先绘制了一个背景图，然后在背景图上画线条，然后想用橡皮擦擦去线条但是保留背景图该咋整呢

case 'touchmove':

            var loc = window2Canvas(canvas, touched.clientX, touched.clientY)

            w = loc.x

            h = loc.y

            if (arr.length != 0) {

              // 如果没有这句话，橡皮擦可以连续执行，有了就是断断续续执行

              obj.putImageData(arr[arr.length - 1], 0, 0, 0, 0, width, height);

            }

            if (dType === 'pen') {

              draw.pen(x, y, w, h)

            } else if (dType === 'eraser') {

              draw.lineCap = 'round'

              draw.clearRect(w - 5, h - 5, 10, 10)

            }

            break

现在就有这么个问题，就是执行了putImageData之后，再执行clearRect方法就是断断续续的

Answer 1

这个可能需要用到多个层的概念。你背景是一层，然后有一层是你绘图对应的层，然后两个再混合显示，你所有的操作实际上只对绘图层。这里需要注意的是你表面是在混合后的层在操作，但实际上你仅仅是在上面获取交互信息，然后去处理绘图层，最后再混合出来展示，这一点必须吃透，否则就会出错。你之所以出现问题估计也是类似操作没有吃透，变成了在混合后的层直接操作了。