Question

我正在尝试在页面上叠加画布，试图让它看起来像已被磨砂，然后使用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（）来每秒运行并用颜色重新填充画布，这样它就需要再次清除但是它不起作用，只能完全删除填充。

任何人都可以告诉我如何重置画布再次填充颜色？如果它可以慢慢地看起来像它再次冻结那将是一个奖励。

Answer 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/

Canvas透明蒙版效果重置

1 个答案: