js实现PC端和移动端刮卡效果

本文实例为大家分享了js刮卡效果的具体代码，供大家参考，具体内容如下
效果图：
具体代码：
<！DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>小月博客刮刮卡案例分享</title><script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;list-style: none;}body {background: #E34830;position: relative;}.banner1 {display: block;width: 100%;/*height: auto;*/overflow: hidden;}.ggl {position: relative;width: 85.6%;height: 90px;margin: -5px auto;background: url（img/ggl.png） no-repeat center center;background-size: 100% 100%;border: 1px solid blue;}.canvas {position: absolute;top: 2px;left: 2.5%;width: 95%;height: 82px;line-height: 82px;text-align: center;z-index: 2;border: 1px solid black;}.info {position: absolute;top: 2px;left: 2.5%;width: 95%;height: 82px;text-align: center;}.info span {display: block;font-size: 18px;}#prompt {line-height: 40px;}.btn {position: relative;width: 50%;height: 35px;line-height: 35px;background: #df412b;color: #fff;border-radius: 5px;margin: 0 auto;z-index: 1;}.guize {display: block;width: 85.6%;height: auto;margin: 5% auto 10% auto;border-radius: 5px;border: 1px solid black;}.num {width: 90%;margin: 0 auto;height: 30px;line-height: 30px;text-align: center;font-size: 14px;margin-top: 5%;border: 1px solid black;}#ok,#no {display: none;}.pop {position: fixed;left: 0;top: 0;z-index: 3;width: 100%;height: 100%;background: rgba（0, 0, 0, 0.6）;display: none;}.pop img {width: 100%;height: auto;overflow: hidden;margin: 15% auto;}</style><script>//控制刮卡次数var t = 0;//初始化所有数据并且随机产生奖品var initialize = function（） {//剩余刮卡次数$（".num1"）.html（4 - t）;//随机数function getRandomNum（lbound, ubound） {return （Math.floor（Math.random（） * （ubound - lbound）） + lbound）;}var r = getRandomNum（1, 100）;var btn = document.getElementsByClassName（"btn"）;for （var i = 0; i < btn.length; i++） {btn[i].style.zIndex = "1";}document.getElementById（"no"）.style.display = "none";document.getElementById（"ok"）.style.display = "none";//初始化涂抹面积isOk = 0;if （r < t * 33） {document.getElementById（"prompt"）.innerHTML = "恭喜您，中奖了！"var ok = document.getElementById（"ok"）;ok.style.display = "block";//点击领取奖品ok.onclick = function（） {window.location.href = "prize.html"};} else {document.getElementById（"prompt"）.innerHTML = "很遗憾，未中奖！"document.getElementById（"no"）.style.display = "block";}};var c1; //画布var ctx; //画笔var ismousedown; //标志用户是否按下鼠标或开始触摸var isOk = 0; //标志用户是否已经刮开了一半以上var fontem = parseInt（window.getComputedStyle（document.documentElement, null）["font-size"]）; //这是为了不同分辨率上配合@media自动调节刮的宽度/* 页面加载后开始初始化画布 */window.onload = function（） {initialize（）;c1 = document.getElementById（"c1"）;//这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。//最好设置成跟画布在页面中的实际大小一样//不然canvas中的坐标跟鼠标的坐标无法匹配c1.width = c1.clientWidth;c1.height = c1.clientHeight;ctx = c1.getContext（"2d"）;//PC端的处理c1.addEventListener（"mousemove", eventMove, false）;c1.addEventListener（"mousedown", eventDown, false）;c1.addEventListener（"mouseup", eventUp, false）;//移动端的处理c1.addEventListener（"touchstart", eventDown, false）;c1.addEventListener（"touchend", eventUp, false）;c1.addEventListener（"touchmove", eventMove, false）;//初始化initCanvas（）;}//初始化画布，画灰色的矩形铺满function initCanvas（） {//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。//c1.style.backgroundImage="url（中奖图片.jpg）";ctx.globalCompositeOperation = "source-over";ctx.fillStyle = "#aaaaaa";ctx.fillRect（0, 0, c1.clientWidth, c1.clientHeight）;ctx.fill（）;ctx.font = "Bold 30px Arial";ctx.textAlign = "center";ctx.fillStyle = "#999999";ctx.fillText（"刮一刮", c1.width / 2, 50）;//把这个属性设为这个就可以做出圆形橡皮擦的效果//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法ctx.globalCompositeOperation = "destination-out";}//鼠标按下 和 触摸开始function eventDown（e） {e.preventDefault（）;ismousedown = true;}//鼠标抬起 和 触摸结束function eventUp（e） {e.preventDefault（）;//得到canvas的全部数据var a = ctx.getImageData（0, 0, c1.width, c1.height）;var j = 0;for （var i = 3; i < a.data.length; i += 4） {if （a.data[i] == 0） j++;}//当被刮开的区域等于一半时，则可以开始处理结果if （j >= a.data.length / 8） {isOk = 1;}ismousedown = false;}//鼠标移动 和 触摸移动function eventMove（e） {e.preventDefault（）;if （ismousedown） {if （e.changedTouches） {e = e.changedTouches[e.changedTouches.length - 1];}var topY = document.getElementById（"top"）.offsetTop;var oX = c1.offsetLeft,oY = c1.offsetTop + topY;var x = （e.clientX + document.body.scrollLeft || e.pageX） - oX || 0,y = （e.clientY + document.body.scrollTop || e.pageY） - oY || 0;//画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = "destination-out";//画出来是透明的ctx.beginPath（）;ctx.arc（x, y, fontem * 1.2, 0, Math.PI * 2, true）;//下面3行代码是为了修复部分手机浏览器不支持destination-out//我也不是很清楚这样做的原理是什么c1.style.display = "none";c1.offsetHeight;c1.style.display = "inherit";ctx.fill（）;}if （isOk） {var btn = document.getElementsByClassName（"btn"）;for （var i = 0; i < btn.length; i++） {btn[i].style.zIndex = "3";}document.getElementsByClassName（"btn"）[0].style.zIndex = "3";}}//没有中奖再来一次$（"#no"）.click（function（） {if （t > 3） {//因该弹出遮罩层提示您的次数已经用完了$（".pop1"）.show（）;$（".pop1 img"）.click（function（） {$（".pop1"）.hide（）;}）} else {t++;//初始化按钮document.getElementById（"no"）.style.display = "none";document.getElementById（"ok"）.style.display = "none";window.onload（）;initCanvas（）;}}）;</script></head><body><img src="img/banner1.png" class="banner1" /><div class="ggl" id="top"><div class="info" id="prize"><span id="prompt"></span><span class="btn" id="ok">领取奖品</span><span class="btn" id="no">再来一次</span></div><canvas id="c1" class="canvas"></canvas></div><div class="num">您还有<span class="num1"></span>次刮卡机会</div><img src="img/guize.png" class="guize" /><！-- 遮罩层1抽奖次数已经用完--><div class="pop pop1"><img src="img/pop1.png" /></div><div class="pop pop2"><img src="img/pop2.png" id="pop2" /></div></body></html>
源码下载：js刮卡效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。