刪除畫布繪制的png圖像

Question

我正在為ipad開發html5應用程序。 我想在canvas元素中顯示一個圖像，並在其底下顯示一個背景圖像。 當用戶在畫布上的圖像上擦手指時，應擦除以顯示背景圖像。 這是我開始使用的代碼。 現在，我只是想畫一條透明線來顯示背景圖像。 我稍后會擔心觸摸事件。 有任何想法嗎？

        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();
            }
        } 

Answer 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);

Answer 2

我認為復合操作應該是復制以外的東西-可能是目的地輸出。

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

獲得這種工作的另一種方法可能是直接從上下文的ImageData中清除像素數據。

Answer 3

您可以在一個畫布上繪制圖像，在另一個具有較高z索引的畫布上繪制要擦除的蒙版。