js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS


Posted in Javascript onNovember 18, 2013

绝对值得看的来篇,哈哈。本人亲自完成,有错误请大家指出:
现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的
​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS
如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个
代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 
<title>eraser effect</title> 
<script type="text/javascript" src="jquery.core.js"></script> 
<style> 
#canvas { 
background:url(winning-ticket.jpg);<!--奖品图片--> 
width: 531px; 
height: 438px; 
} 
.before{ 
background:none !important; 
} 
#canvas canvas { 
cursor: url("hand.png") 0 0, auto;<!--PC端的手势图片--> 
} 
</style> 
</head> 
<body oncontextmenu="return false;" onselectstart="return false;"> 
<div id="canvas"></div> 
</body> 
<script type="text/javascript"> 
(function() { 
window.onload = function(){ 
/**判断浏览器是否支持canvas**/ 
try{ 
document.createElement('canvas').getContext('2d'); 
}catch(e){ 
var addDiv = document.createElement('div'); 
alert('您的手机不支持刮刮卡效果哦~!'); 
} 
}; 
var u = navigator.userAgent,mobile = ''; 
if(u.indexOf('iPhone') > -1) mobile = 'iphone'; 
if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android'; 
function createCanvas(parent, width, height) { 
var canvas = {}; 
canvas.node = document.createElement('canvas'); 
canvas.context = canvas.node.getContext('2d'); 
canvas.node.width = width || 100; 
canvas.node.height = height || 100; 
parent.appendChild(canvas.node); 
return canvas; 
} 
function init(container, width, height, fillColor, type) { 
var canvas = createCanvas(container, width, height); 
var ctx = canvas.context; 
// define a custom fillCircle method 
ctx.fillCircle = function(x, y, radius, fillColor) { 
this.fillStyle = fillColor; 
this.beginPath(); 
this.moveTo(x, y); 
this.arc(x, y, radius, 0, Math.PI * 2, false); 
this.fill(); 
}; 
ctx.clearTo = function(fillColor) { 
ctx.fillStyle = fillColor; 
ctx.fillRect(0, 0, width, height); 
}; 
ctx.clearTo(fillColor || "#ddd"); 
canvas.node.addEventListener("touchstart",function(e){ 
canvas.isDrawing = true; 
},false); 
canvas.node.addEventListener("touchend",function(e){ 
canvas.isDrawing = false; 
},false); 
canvas.node.addEventListener("touchmove",function(e){ 
if (!canvas.isDrawing) { 
return; 
} 
if(type == 'Android'){ 
var x = e.changedTouches[0].pageX - this.offsetLeft; 
var y = e.changedTouches[0].pageY - this.offsetTop; 
}else{ 
var x = e.pageX - this.offsetLeft; 
var y = e.pageY - this.offsetTop; 
} 
var radius = 20; 
var fillColor = '#ff0000'; 
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillCircle(x, y, radius, fillColor); 
},false); 
} 
var container = document.getElementById('canvas'); 
init(container, 531, 438, '#ff0000', mobile); 
})(); 
</script> 
</html>
Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
基于javascript滚动图片具体实现
Nov 18 #Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 #Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 #Javascript
Jquery取得iframe下内容的方法
Nov 18 #Javascript
JavaScript实现的日期控件具体代码
Nov 18 #Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 #Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 #Javascript
You might like
php 随机生成10位字符代码
2009/03/26 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
2013年大学生的自我鉴定
2013/10/24 职场文书
2015新学期开学寄语
2015/02/26 职场文书
公司市场部岗位职责
2015/04/15 职场文书
保护校园环境倡议书
2015/04/28 职场文书
二手房购房意向书
2015/05/09 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
如何书写邀请函?
2019/06/24 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
SQLServer之常用函数总结详解
2021/08/30 SQL Server
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL