Html5实现移动端、PC端刮刮卡效果.pdf

这篇文章主要介绍了 Html5 实现移动端、 PC 端 刮刮卡效果的相关资料 ,需要的朋友可 以参考下 刮刮卡需求： 每一位用户有三次刮刮卡的机会 本次刮刮卡的结果会覆盖上次的结果 刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖） 刮出的结果包含按钮既（领取奖品 or 再来一次 ） 分享活动奖品升级（这里主要是微信分享的回调了） 我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码 第一、 body 创建 Canvas XML/HTML Code lt;div class=info id=prizegt; nbsp; nbsp; nbsp; nbsp;lt;span id=promptgt;lt;/spangt; nbsp; nbsp; nbsp; nbsp;lt;span class=btn id=okgt; 领取奖品 lt;/spangt; nbsp; nbsp; nbsp; lt;span class=btn id=nogt; 再来一次 lt;/spangt; nbsp; nbsp;lt;/divgt; nbsp; nbsp;lt;canvas id=c1 class=canvasgt;lt;/canvasgt; nbsp; 这里我们首先创建了一个 Canvas，并且在 canvas 底部加上了刮开后的效果。 第二、 页面加载后开始初始化画布 首先定义一些需要的变量 XML/HTML Code var c1; // 画布 nbsp;nbsp; nbsp;var ctx; // 画笔 nbsp;nbsp; nbsp;var ismousedown; // 标志用户是否按下鼠标或开始触摸 nbsp;nbsp; nbsp;var isOk=0; // 标志用户是否已经刮开了一半以上 nbsp;nbsp; nbsp;var fontem = parseInt(window.getComputedStyle(document.documentElement, null)[font-size]);// 这是为了不同分辨率上配合 @media 自动调节刮的宽度 nbsp; 页面加载后开始初始化画布（这样子就可以在页面创建一个画布了） XML/HTML Code window.onload = function(){ nbsp; nbsp; nbsp; nbsp; c1 = document.getElementById(c1); nbsp;nbsp; nbsp; nbsp; //这里很关键， canvas 自带两个属性 width 、height,我理解为画布的分辨 率，跟 style 中的 width 、height 意义不同。 nbsp;nbsp; nbsp; nbsp; // 最好设置成跟画布在页面中的实际大小一样 nbsp;nbsp; nbsp; nbsp; // 不然 canvas 中的坐标跟鼠标的坐标无法匹配 nbsp;nbsp; nbsp; nbsp; c1c1.width=c1.clientWidth; nbsp;nbsp; nbsp; nbsp; c1c1.height=c1.clientHeight; nbsp;nbsp; nbsp; nbsp; ctx = c1.getContext(2d); nbsp;nbsp; nbsp; nbsp; //PC 端的处理 nbsp;nbsp; nbsp; nbsp; c1.addEventListener(mousemove,eventMove,false); nbsp;nbsp; nbsp; nbsp; c1.addEventListener(mousedown,eventDown,false); nbsp;nbsp; nbsp; nbsp; c1.addEventLis