实现刮刮卡效果,刮层下面是文字;
<canvas id="canvas_background" width="145px" height="35px"></canvas> <canvas id="score"></canvas> <script type="text/javascript"> (function (bodyStyle) { // 在FF浏览器环境中,通过修改CSS3属性,使子元素中所有的文字都不能选择。 bodyStyle.mozUserSelect = 'none'; // 在Google浏览器环境中,通过修改CSS3属性,使子元素中所有的文字都不能选择。 bodyStyle.webkitUserSelect = 'none'; var canvas_score = document.querySelector('#score'), ctx_score = canvas_score.getContext('2d'); var canvas = document.querySelector('#canvas_background'), ctx = canvas.getContext('2d'); var mousedown = false; var trigger = true; var w = 145, h = 35; //中奖文字信息 var winInfo = "谢谢参与"; ctx_score.font = 'Normal 60px 宋体'; ctx_score.fillStyle = '#000000'; ctx_score.fillText(winInfo, 30, 90); //添加灰色刮层 ctx.fillStyle = 'gray'; ctx.fillRect(0, 0, 145, 35); // 在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明。 ctx.globalCompositeOperation = 'destination-out'; // 处理“鼠标”或“手指”按下时的动作。 function eventDown(e){ // 通知浏览器不要执行与事件关联的默认动作。 e.preventDefault(); // 得到中奖图片的像素数据(像素计算非常耗费CPU和内存,可能会导致浏览器崩溃)。 var data = ctx.getImageData(0, 10, w, h).data; // 通过计算每一个像素,得知还有多少“遮挡区域”。 for (var i = 0, j = 0; i < data.length; i += 4) { if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) { j++; } } // 存在遮挡区域时才触发刮奖事件。 if (j <= 0) { trigger = false; } mousedown = true; } // 处理“鼠标”或“手指”按下后移动时的动作。 function eventMove(e){ e.preventDefault(); if (mousedown) { // 如果存在涉及当前事件的手指的一个列表(这里是指正在移动中的手指)。 if (e.changedTouches){ // 取得涉及当前事件中众多手指中的最后一个。 e = e.changedTouches[e.changedTouches.length - 1]; } // 计算当前“鼠标”或“手指”在canvas中的坐标(注意,计算的坐标是canvas里的坐标)。 var x = (e.clientX + document.body.scrollLeft || e.pageX) - canvas.offsetLeft || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - canvas.offsetTop || 0; with (ctx) { beginPath(); arc(x, y, 10, 0, Math.PI * 2); fill(); } } } // 处理“鼠标”或“手指”按下后抬起时的动作。 function eventUp(e){ e.preventDefault(); mousedown = false; if(trigger){ // 得到中奖图片的像素数据(像素计算非常耗费CPU和内存,可能会导致浏览器崩溃)。 var data = ctx.getImageData(0, 10, w, h).data; // 通过计算每一个像素,得知还有多少“遮挡区域”。 for (var i = 0, j = 0; i < data.length; i += 4) { if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) { j++; } } // 当还只剩下20%的遮挡区域时弹出中奖信息,同时撤掉遮挡区域。 if (j <= w * h * 0.35) { ctx.clearRect(0, 0, w, h); } } } // 监听“触摸的开始、移动与抬起”事件。 canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); // 监听“鼠标的开始、移动与抬起”事件。 canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove); })(document.body.style); </script>
相关推荐
一个html5 canvas的刮刮卡效果
html5手机刮刮卡效果_手指滑动刮刮卡特效
微信接口,刮刮卡(含微信接口处理和html5刮刮卡效果)经测试可用。 weixin.php 微信接口处理文件(包含了概率和跳转页面,返回值等操作) ggk文件夹 存放了一个html5的刮刮卡前端效果(经测试Android 和IOS均可用...
刮刮卡(含微信接口处理和html5刮刮卡效果,完整版可用于商业,方便再开发)经测试可用。 weixin.php 微信接口处理文件(包含了概率和跳转页面,返回值等操作) ggk文件夹 存放了一个html5的刮刮卡前端效果(经测试...
移动端刮刮卡效果 使用了canvas,奖品可以自己用 canvas 生成一下。朋友推荐的一个插件写的,挺好用的
canvas绘制刮刮卡效果 本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下 先上图 代码 <!DOCTYPE html> <html> <head> 风舞红枫,前端技术,canvas"/> 风舞红枫,前端...
使用 HTML5 + canvas 实现刮刮卡效果
android刮刮卡效果实现Demo,包含圆形图片的实现
2种使用html5实现刮刮卡效果 html5 刮刮卡 canvas jquery css3 简单粗暴,流行的刮刮卡实现方式 代码清晰,方便解读
仿微信界面+刮刮卡效果,欢迎下载学习与交流
html5 canvas 实现刮刮卡效果,实现简单网络资源占用少
js刮刮卡效果
利用html5的特性来实现刮刮卡效果,所以浏览器要求比较高
使用PorterDuffXfermode实现一个简单的刮刮卡效果
apk软件,可以实现刮刮卡效果,利用安卓自定义view的图层重叠方法绘制,只需用手划过屏幕。另外apk文件在bin下面,已经运行好了,可以随时拿去用。
微信刮刮卡的效果源码,PC、iPhone和Android机器上面完美运行