js 刮刮乐

网上无意间搜到了一个js刮刮乐效果，觉得很有趣，所以找来分析一下代码和效果，并根据自己理解精简了部分代码，分析不到位之处还请指教

(function(bodyStyle){

bodyStyle.mozUserSelect = 'none';           //这个功能设置为无法选择文本

bodyStyle.webkitUserSelect = 'none';

var img = new Image();

var canvas = document.querySelector('canvas');   //返回第一个canvas

canvas.style.position = 'absolute';       

img.addEventListener('load',function(e){    //给img绑定一个加载事件

var ctx;

var w = img.width, h = img.height;

var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;

//获取canvas相对于img元素的边距

var mousedown = false;

function layer(ctx){    //构建遮盖层

ctx.fillStyle = 'gray';

ctx.fillRect(0, 0, w, h);    //自适应图片宽高

}

function eventDown(e){  //鼠标按下事件

e.preventDefault();    //阻止事件默认动作

mousedown=true;

}

function eventUp(e){  //鼠标抬起事件

e.preventDefault();

mousedown=false;

}

function eventMove(e){  //鼠标移动事件适用于web&wap端

e.preventDefault();

if(mousedown){

if(e.changedTouches){     //记录自移动以来发生改变的对象数组，定位到最后一次改变

e=e.changedTouches[e.changedTouches.length-1];

}

var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

//获取触摸的坐标

with(ctx){   //设定默认对象ctx，相当于圆形画笔

beginPath()

arc(x, y, 5, 0, Math.PI * 2);

fill();

}

}

}

canvas.width=w;   //设置画板的长宽，根据图片自适应

canvas.height=h;

canvas.style.backgroundImage='url('+img.src+')';   //获取画板的背景图

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

layer(ctx);   //调用灰色遮罩层

ctx.globalCompositeOperation = 'destination-out';   //将新图像绘制到已有图像上

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

});

img.src = 'http://www.baidu.com/img/bdlogo.gif';

})(document.body.style);

思路分析：刮刮乐一共有三层，第一层是背景层，随便选一张图片即可；第二层是遮罩层，大小和位置自适应第一层背景图，用canvas画出，也就是globalCompositeOperation的概念里所说的目标图像；第三层是源图像，即canvas绘出的一个个圆。利用globalCompositeOperation中的destination-out属性，在源图像外显示目标图像（只有源图像外的目标图像部分会被显示，源图像是透明的。）目标图像是已经画在画布上的图像，即灰色遮罩，源图像通过鼠标的移动或者手指的触摸来放置到画布上。

废话了这么多其实关于刮刮乐我们需要掌握的知识点主要有两个：

1.js 的touch事件

2.canvas globalCompositeOperation 属性

最后我发现了刮刮乐一个bug。。当你点击鼠标快速移动的时候，放开鼠标之后不用点击都能刮刮乐，很神奇。。但由于技术渣，并不知道解决方法，虽然我觉得不会有人像我这样点击鼠标飞速移动哈哈。