先给大家展示下效果图：
刮刮卡需求：
每一位用户有三次刮刮卡的 机会
本次刮刮卡的结果会覆盖上次的结果
刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）
刮出的结果包含按钮既（领取奖品 or 再来一次 ）
分享 活动 奖品升级（这里主要是微信分享的回调了）
我们自己的需求，今天就说怎么 制作 刮刮卡，有这样需求的可以找我要 源 码
第一、body创建Canvas
XM L/HT ML Code 复制内容到剪贴板
< div &nbs p; class = "info" id = " PR ize" > < span id = "p rom pt" > </ span > < span class = " BT n" id = "ok" > 领取奖品 </ span > < span class = "btn" id = "no" > 再来一次 </ span > </ div > < canvas id = "c1" class = "canvas" > </ canvas >
这里我们首先创建了一个Canvas，并且在canvas底部加上了刮开后的效果。
第二、 页面加载后 开始 初始化 画布
首先定义一些需要的变量
XML/HTML Code 复制内容到剪贴板
VAR c1; //画布 var ctx; // 画笔 var ismousedown; //标志用户 是否 按下鼠标或开始触摸 var isOk = 0 ; //标志用户是否已经刮开了一 半 以上 var fontem = pars ei nt (window.getComputedStyle(document.documentElement, null)["font -s ize"]);//这是为了不同分辨率上配合@media自动 调节 刮的 宽 度
页面加载后开始初始化画布（这样子就可以在页面创建一个画布了）
XML/HTML Code 复制内容到剪贴板
window.onload = function (){ c1 = document .getElementById("c1"); //这里很关键，canvas 自带 两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。 //最好设置成跟画布在页面中的实际大小一样 //不然canvas中的坐标跟鼠标的坐标无法匹配 c1 c1.width =c1.clientWidth; c1 c1.height =c1.clientHeight; ctx = c1 .getContext("2d"); //PC端的处理 c1.addEventListener(" ;m ou SEM ove",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); //初始化 in IT Canvas(); }
第三、画灰色的矩形铺满
XML/HTML Code 复制内容到剪贴板
function initCanvas(){//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div // c1.style.backgroundImage = "url(中奖图片. jpg )" ; ctx.globalComposite opera tion = "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.globalCompositeO PE ration = 'destination-out' ;}
第四、鼠标按下 和 触摸开始
XML/HTML Code 复制内容到剪贴板
function eventDown(e){ e.p rev entDefault(); ismousedown = true ;}
第五、鼠标抬起 和 触摸结束
XML/HTML Code 复制内容到剪贴板
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 ; }
第六、鼠标移动 和 触摸移动
XML/HTML Code 复制内容到剪贴板
//鼠标移动 和 触摸移动 function eventMove(e){ e.preventDefault(); if(ismousedown) { if(e.changedTouches){ e 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.be gin Path(); ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true); //下面3行代码是为了修复部分手机浏览器不支持destination-out //我也不是很清楚这样做的原理 是什么 c1.style.dis play = 'none' ; c1.offsetHeight; c1.style.display = 'inherit' ; ctx.fill(); } if(isOk){ var btn = document .getElementsBy classname ("btn"); for(var i = 0 ; i < btn.length ; i++ ){ btn[i] .style.zIndex = '3' ; } document.getElementsByClassN am e("btn")[0] .style.zIndex = "3" ; } }
第七： 如果没有抽中再来一次
很明显，再来一次就是初始化所有的值，画布重新加载，但是如果有次数限制的需求，务必在这里计算清楚。
注：由于我们要求的比较多今天就不说怎么计算 中奖概率 的方法了。
以上所述是小编给大家介绍的 Html5实现移动端、PC端 刮刮卡效果， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
总结
以上是 为你收集整理的 Html5实现移动端、PC端 刮刮卡效果 全部内容，希望文章能够帮你解决 Html5实现移动端、PC端 刮刮卡效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Html5实现移动端、PC端 刮刮卡效果的详细内容...