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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
tsconfig.json配置详解
May 17 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
详解a++和++a的区别
2017/08/30 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
个人小程序接入支付解决方案
2019/05/23 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
实习医生自我评价
2013/09/22 职场文书
后勤部长岗位职责
2013/12/14 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
驾驶员岗位职责
2014/01/29 职场文书
授权委托书范本
2014/04/03 职场文书
家长会学生演讲稿
2014/04/26 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android