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 相关文章推荐
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
基于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里array_work用法实例分析
2015/07/13 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python代码太长换行的实现
2019/07/05 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
个人评价范文分享
2014/01/11 职场文书
安全事故检讨书
2014/01/18 职场文书
初中美术教学反思
2014/01/29 职场文书
岗位职责的构建方法
2014/02/01 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
买卖车协议书
2014/04/21 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
python基础之匿名函数详解
2021/04/21 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript