擦除画布绘制的 png 图像答案

【问题标题】：Erasing a png image drawn by a canvas擦除画布绘制的 png 图像
【发布时间】：2011-07-27 21:57:45
【问题描述】：

我正在为 ipad 开发一个 html5 应用程序。我想在画布元素中显示一个图像，下面有一个背景图像。当用户在画布中的图像上擦拭手指时，它应该擦除以显示背景图像。这是我开始的代码。现在我只是想画一条透明线来显示背景图像。稍后我会担心触摸事件。有什么想法吗？

        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            img.src = 'Lord-of-Bones.png';
            img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.globalCompositeOperation = "copy";
                ctx.strokeStyle = "rgba(0,0,0,0)";
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(170,15);
                ctx.stroke();
            }
        }

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

这就是最终为我工作的原因。

var imageData = context.getImageData(x,y,50,50);
var data = imageData.data;
for (var i = 0; i < data.length; i+=4) {
    data[i] = 0; //red
    data[i+1] = 0; //green
    data[i+2] = 0; //blue
    data[i+3] = 0; //alpha
}
context.putImageData(imageData, x, y);

【讨论】：

【解决方案2】：

我认为复合操作应该不是复制——也许是目的地输出。

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

获得此类工作的另一种方法是直接从上下文的 ImageData 中清除像素数据。

【讨论】：

我实际上最终做的是清除像素数据。我抓取了“ontouchmove”事件的数据，然后将 alpha 更改为 0，然后使用 putImageData 将其放回。

【解决方案3】：

您可以在一个画布上绘制图像，在另一个 z-index 较高的画布上绘制要擦除的蒙版。

【讨论】：