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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
js类的继承定义与用法分析
Jun 21 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP实现简易图形计算器
2020/08/28 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python如何输出警告信息
2020/07/30 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
自荐信格式范文
2013/10/07 职场文书
学生党支部先进事迹
2014/02/04 职场文书
会计员岗位职责
2014/03/15 职场文书
家长学校工作方案
2014/05/07 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
Python中可变和不可变对象的深入讲解
2021/08/02 Python