1

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

3 に答える 3

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);
于 2011-07-29T13:29:42.393 に答える
0

複合操作は、コピー以外の何か、おそらく宛先出力である必要があると思います。

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

このような機能を実現するもう1つの方法は、コンテキストのImageDataから直接ピクセルデータをクリアすることです。

于 2011-07-27T22:03:29.270 に答える
0

あるキャンバスに画像を描画し、z-indexが高い別のキャンバスに消去するマスクを描画できます。

于 2011-07-28T01:44:30.940 に答える