利用HTML5的画布Canvas实现刮刮卡效果

先给大家展示效果：

查看演示源码下载
你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。
我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。

HTML

我们只需要在页面中加入canvas标签元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，运行在支持HTML5的现代浏览器上。

<canvas></canvas>

Javascript

首先，我们要禁用页面的鼠标选中拖动的事件，就是不运行执行选中操作。

var bodyStyle = document.body.style; bodyStyle.mozUserSelect = "none"; bodyStyle.webkitUserSelect = "none";

接着我们定义图片类，获取canvas元素，并设置背景和位置属性。我们在本例中用到两张随机照片，每次刷新随机一张图片作为背景。

var img = new Image（）; var canvas = document.querySelector（"canvas"）; canvas.style.backgroundColor="transparent"; canvas.style.position = "absolute"; var imgs = ["p_0.jpg","p_1.jpg"]; var num = Math.floor（Math.random（）*2）; img.src = imgs[num];

然后进入主体，当检测到图片加载完的时候，首先定义一些属性和函数，函数layer（）用来绘制一个灰色的正方形，eventDown（）定义了按下事件eventUp（）定义了松开事件，eventMove（）定义了移动事件，其中当按下时，获取坐标位移，并通过arc（x, y, 10, 0, Math.PI * 2）来绘制小圆点。

img.addEventListener（"load", function（e） {var ctx;var w = img.width, h = img.height;var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;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）{ 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） {beginPath（）arc（x, y, 10, 0, Math.PI * 2）;//绘制圆点fill（）; } }}//... }）;

最后，通过canvas调用以上函数，绘制图形，并且侦听触控及鼠标事件，调用相应的函数，请看代码：

img.addEventListener（"load", function（e） {//..接上段代码canvas.width=w;canvas.height=h;canvas.style.backgroundImage="url（"+img.src+"）";ctx=canvas.getContext（"2d"）;ctx.fillStyle="transparent";ctx.fillRect（0, 0, w, h）;//绘制矩形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）;

以上内容仅供参考，大家可以结合实际情况，结合后台程序和数据库，完成一个真正的刮刮乐。以上内容是我写的利用HTML5的画布Canvas实现刮刮卡效果，希望大家喜欢。