html刮刮卡开始刮奖页面,Html5实现移动端、PC端 刮刮卡效果
先给大家展示下效果图:
刮刮卡需求:
每一位用户有三次刮刮卡的机会
本次刮刮卡的结果会覆盖上次的结果
刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖)
刮出的结果包含按钮既(领取奖品 or 再来一次 )
分享活动奖品升级(这里主要是微信分享的回调了)
我们自己的需求,今天就说怎么制作刮刮卡,有这样需求的可以找我要源码
第一、body创建Canvas
XML/HTML Code复制内容到剪贴板
领取奖品
再来一次
这里我们首先创建了一个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");
//这里很关键,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";
ctx.textAlign = "center";
ctx.fillStyle = "#999999";
ctx.fillText("刮一刮",c1.width/2,50);//把这个属性设为这个就可以做出圆形橡皮擦的效果
//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
ctx.globalCompositeOperation = 'destination-out';}
第四、鼠标按下 和 触摸开始
XML/HTML Code复制内容到剪贴板
function eventDown(e){
e.preventDefault();
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
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){
ee=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[i].style.zIndex = '3';
}
document.getElementsByClassName("btn")[0].style.zIndex="3";
}
}
第七: 如果没有抽中再来一次
很明显,再来一次就是初始化所有的值,画布重新加载,但是如果有次数限制的需求,务必在这里计算清楚。
注:由于我们要求的比较多今天就不说怎么计算中奖概率的方法了。
html刮刮卡开始刮奖页面,Html5实现移动端、PC端 刮刮卡效果相关推荐
- [html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由 两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护 个人简介 ...
- 前端页面开发浅谈:PC 端设计如何“完美”迁移到移动端?
文章目录 前言 一.我真的需要一个登录页面吗? 1.1.用户眼中不确定持续使用的系统 1.2.免登陆实现的功能可以满足用户需求 二.举个移动端登陆例子 三.前端学习不是造火箭 四.前端的布局设计 五. ...
- 页面的版心html,关于PC端网页版心及网页自适应问题
通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内,这1200px也就是俗称的版心了.这是网页设计的规则之一,目的是帮助前端制作PC端的页面自适应.目前市面上主流的屏幕 ...
- html刮刮卡开始刮奖页面,html5刮刮卡抽奖 示例源码
[实例简介] [实例截图] [核心代码] Lottery Demo body{ height:1000px; } #lotteryContainer { position:relative; widt ...
- php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
- html手机pc不同页面,PC端和手机端如何同时生成静态页
静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...
- html自动跳转手机端,用JavaScript实现网站自动跳转电脑PC端与手机端不同页面
前天,有一个网友希望在其微擎系统跳转的时候实现鉴别用户不同的客户端,比如电脑PC端和手机端,实现不同的页面跳转.对于之前老蒋有给其设置过PC端网站然后检测手机访问的时候跳转到WAP网站的案例,对于这个 ...
- PC端键盘热键如何与页面交互
什么是热键 在交互设计中,快捷键和键盘热键是提高用户效率和提升用户体验的重要手段之一.在PC端应用和网页设计中,合理运用键盘热键可以帮助用户快速完成操作,提高工作效率和使用体验.本文将介绍PC端键盘热 ...
- PC端和移动端刮卡效果
下载地址:http://download.csdn.net/detail/cometwo/9542401 <!DOCTYPE html> <html><head>& ...
最新文章
- Qt 连接达梦数据库
- django ORM 操作
- 2015年07月04日
- powershell XML操作
- 国科大prml15-BP
- Linux进程里运行新代码,linux调度器源码分析 - 新进程加入(三)
- 分享一个入门级实操项目,思路非常棒!
- Pa2 函数指针 指针函数 分析 (转)
- php的CodeIgniter框架中如何过滤数据(将危险数据如html类型的数据过滤后提交到数据库)...
- C++基础之返回数组
- Sublime Text3报错:Error while loading PyV8 binary:exit code 3
- 在html中frame标签的作用,HTML框架标签frameset、frame、iframe、noframes
- 【渝粤题库】陕西师范大学180102 广告策划 作业(高起专)
- IDEA2017.2汉化
- 一起来看看阿里开源的15个顶级Java项目
- 首屈一指的全球招聘与薪资支付平台Deel收购Zeitgold,以增强薪资和人工智能服务
- 非接触借记贷记流程报文解析
- 电脑生成永久二维码怎么弄的?二维码图案不变怎么改内容?
- SSM医院移动收费运维平台毕业设计源码161045
- java 高德地图路线规划_高德地图api之路线规划