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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP基础知识回顾
2012/08/16 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
从vue源码看props的用法
2019/01/09 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
Python最长公共子串算法实例
2015/03/07 Python
python任务调度实例分析
2015/05/19 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
华为慧通笔试题
2016/04/22 面试题
2014年办公室文员工作总结
2014/11/12 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
信息技术研修心得体会
2016/01/08 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
python 中yaml文件用法大全
2021/07/04 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android