您当前的位置: 网站优化建站常识

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

发布于:2016-07-09 23:28:03  作者:徐文海网络   点击:

先给大家展示下效果图:

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

刮刮卡需求:

每一位用户有三次刮刮卡的机会
本次刮刮卡的结果会覆盖上次的结果
刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖)
刮出的结果包含按钮既(领取奖品 or 再来一次 )
分享活动奖品升级(这里主要是微信分享的回调了)
我们自己的需求,今天就说怎么制作刮刮卡,有这样需求的可以找我要源码

第一、body创建Canvas

XML/HTML Code复制内容到剪贴板

<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>  

这里我们首先创建了一个Canvas,并且在canvas底部加上了刮开后的效果。

第二、 页面加载后开始初始化画布

首先定义一些需要的变量

XML/HTML Code复制内容到剪贴板

var c1; //画布   

 var ctx; //画笔   

 var ismousedown; //标志用户是否按下鼠标或开始触摸   

 var isOk=0; //标志用户是否已经刮开了一半以上   

 var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是为了不同分辨率上配合@media自动调节刮的宽度  

页面加载后开始初始化画布(这样子就可以在页面创建一个画布了)

XML/HTML Code复制内容到剪贴板

window.onload = function(){    

    c1 = document.getElementById("c1");   

    //这里很关键,徐文海seo,canvas自带两个属性width、height,我理解为画布的分辨率,跟style中的width、height意义不同。   

    //最好设置成跟画布在页面中的实际大小一样   

    //不然canvas中的坐标跟鼠标的坐标无法匹配   

    c1c1.width=c1.clientWidth;   

    c1c1.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();   

 }  

第三、画灰色的矩形铺满

XML/HTML Code复制内容到剪贴板

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";   

本文关键词: html5刮刮卡|

[相关阅读]

我们介绍

  徐文海网络科技工作室,专业从事石家庄百度优化,石家庄网站建设,石家庄网络公司,石家庄网站制作,石家庄网站优化,石家庄软件制作。如果您感觉我们不错请分享↓给更多的人