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 相关文章推荐
javascript间隔刷新的简单实例
Nov 14 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
详解参数传递四种形式
Jul 21 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 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
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
javascript数组去掉重复
2011/05/12 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python 列表(List)操作方法详解
2014/03/11 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python中的函数作用域
2018/05/07 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python障碍式期权定价公式
2019/07/19 Python
使用python实现多维数据降维操作
2020/02/24 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python math模块的基本使用教程
2021/01/16 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
关于军训的感想
2015/08/07 职场文书