js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

195 阅读 0 评论 129 点赞

我是靠谱客的博主正直大米，最近开发中收集的这篇文章主要介绍js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出：
现在的手机完美支持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> 