js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
更新时间：2013年11月18日 16:53:07 作者：
手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的，本人亲自完成，有错误请大家指出
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出：
现在的手机完美支持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>
现在的手机完美支持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>
相关文章
本文通过实例代码给大家介绍了js开发中微信小程序自定义底部弹出框效果，非常不错，具有参考借鉴价值，需要的朋友参考下2016-12-12
这篇文章主要介绍了es6数值的扩展方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了微信小程序使用MoxB实现全局状态管理方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web开发更加快捷。本文给大家分享Bootstrap精简教程，对Bootstrap精简教程感兴趣的朋友一起学习2015-11-11
排序算法是笔试中经常出现的,提起排序算法就一定要提下算法复杂度和大O表示法,算法复杂度是指算法在编写成可执行程序后，运行时所需要的资源，资源包括时间资源和内存资源,这篇文章主要给大家介绍了关于如何利用JavaScript实现排序算法的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了javascript面向对象创建对象的方式,结合实例形式总结分析了javascript常见的7种创建对象的方式,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JavaScript图像放大镜效果实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
简单对比分析JavaScript中的apply,call与this的使用
简单的说call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的2015-12-12
javascript 常用功能总结，学习js的朋友可以参考下2012-03-03
这篇文章主要介绍了JavaScript中的多种对象合并方法,通过代码的形式给大家介绍的非常详细，需要的朋友可以参考下，希望能够给你带来帮助2021-08-08
最新评论