0

この投稿に従って、キャンバスをページに重ねて霜が降りたように見せ、mousemove を使用してクリアしようとしています。

http://www.stevecalderon.com/2012/03/html5-canvas-tricks-transparency-mask-for-eraser-effect.html

私はjsfiddleを作成しました - http://jsfiddle.net/ZWsG6/2/ 

var canvas = "";
var ctx = "";

function frost2(){

var int=self.setInterval(function(){clock()},1000);

canvas = document.createElement("canvas");

canvas.width = window.innerWidth;
canvas.height= window.innerHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
var objTo = document.getElementById("fltouch");
objTo.appendChild(canvas);

ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.95;
ctx.fillStyle = "rgb(0, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = 'destination-out';    

function drawPoint(pointX,pointY){

    ///scrape
    var grd = ctx.createLinearGradient(pointX - 75,pointY-5,pointX + 75,pointY + 5)

grd.addColorStop(0, "transparent"); 
grd.addColorStop(0.3, "rgba(255,255,255,.6)"); 
grd.addColorStop(0.7, "rgba(255,255,255,.6)"); 
grd.addColorStop(1, "transparent"); 

ctx.fillStyle = grd;
ctx.fillRect(pointX - 75,pointY,400,30);

    }

canvas.addEventListener('mousemove',function(e){
            e.preventDefault();
            drawPoint(e.pageX,e.pageY);
        },false);

}


function clock(){
ctx.globalAlpha = 0.95;
ctx.fillStyle = "rgb(0, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';    

}

関数 clock() を追加して、毎秒実行し、キャンバスに色を補充して、もう一度クリアする必要があるようにしましたが、機能しません。塗りつぶしを完全に削除するだけです。

キャンバスをもう一度色で塗りつぶす方法を教えてください。それが再び凍っているように見えるようにゆっくりと行うことができれば、それはボーナスになります.

4

1 に答える 1

1

キャンバスを補充する前にglobalCompositeOperation、デフォルト値に戻す必要があります:source-over

function clock() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgb(0, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'destination-out';
}

http://jsfiddle.net/VqCbv/1/

于 2013-02-04T01:42:13.307 に答える