Canvas能否设置透明度为0实现擦除效果 而非使用颜色绘制

直接把绘制透明度设为0是实现不了擦除效果的。
globalAlpha = 0只会让你后续要画的内容完全透明，等于根本没往画布上画东西，完全碰不到画布上已经存在的像素，当然擦不掉原有内容，更不可能透出下面的元素。

适配你现有代码的擦除方案 #

你现在的画笔逻辑不用大改，只要把上下文的混合模式改成擦除模式就行，核心是设置context.globalCompositeOperation = 'destination-out'。这个模式下，你画出来的所有路径都会变成擦除区域，路径覆盖到的原有画布内容会被直接清掉，自然就能透出画布下方的元素。
修改后的代码：

function draw(event) {
        context.beginPath();
        context.lineWidth = 20;
        context.lineCap = 'round';
        // 开启擦除混合模式
        context.globalCompositeOperation = 'destination-out';
        context.moveTo(coord.x, coord.y);
        reposition(event);
        context.lineTo(coord.x, coord.y);
        context.stroke();

        // 如果擦除完成后还要切回正常绘图，记得把混合模式改回默认值
        // context.globalCompositeOperation = 'source-over';
    }

几个容易踩的坑 #

• 别用rgba(0,0,0,0)这类完全透明的颜色做描边/填充，和globalAlpha=0的问题一样，透明像素画上去等于没画，改不了原有画布内容，擦除完全无效。
• clearRect方法只能清除矩形区域的内容，适合整块清空画布的场景，对你这种自由路径的橡皮擦效果不适用。
• 用destination-out做擦除的时候，不管你给strokeStyle设什么颜色，都不会影响擦除效果，哪怕设成纯黑、纯白，最终效果都是把对应区域清空。

内容的提问来源于stack exchange，提问作者Hazelnut