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 回答