Canvas 刮刮卡

http://jsfiddle.net/299X4/

闲来无事，做了个小demo，顺便练习一下用原生s实现拖动效果。

document.getElementById("can3").addEventListener("mousedown",function(e){
    var rect = e.currentTarget.getBoundingClientRect();
    var gravityPoint = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
          };
    
    if (gravityPoint.x >= ctx3_x && gravityPoint.x <= ctx3_x + 10 && gravityPoint.y >= ctx3_y && gravityPoint.y <= ctx3_y + 50) {
    	dragFlag = true;
    	pre_x = gravityPoint.x - ctx3_x;
    	pre_y = gravityPoint.y - ctx3_y;
    }
    
});
document.getElementById("can3").addEventListener("mouseup",function(e){
    var rect = e.currentTarget.getBoundingClientRect();
    var gravityPoint = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
          };
    
    if (gravityPoint.x >= ctx3_x && gravityPoint.x <= ctx3_x + 10 && gravityPoint.y >= ctx3_y && gravityPoint.y <= ctx3_y + 50) {
        dragFlag = false;
        
    }
});
document.getElementById("can3").addEventListener("mousemove",function(e){
	var rect = e.currentTarget.getBoundingClientRect();
    var gravityPoint = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
          };
	
	if (dragFlag) {
		ctx3_x = gravityPoint.x - pre_x;
	    ctx3_y = gravityPoint.y - pre_y;
	    ctx2.clearRect(ctx3_x, ctx3_y, 10, 50);
	}
	
});

分情况判断，当鼠标按下，且此时鼠标坐标在橡皮的方块内时，dragflag为true，松开时为false，此时在mousemove方法里让橡皮移动。

然后来3个canvas，依次覆盖前一个，由于clearrect方法可以把canvas变透明，

所以鼠标在canvas3上移动，canvas2的内容被擦除，canvas1的文字显示出来，就是这个思路！

ok！

完！

Canvas 刮刮卡,布布扣,bubuko.com

Canvas 刮刮卡

原文：http://blog.csdn.net/u012844719/article/details/20717617