js和html5實(shí)現(xiàn)手機(jī)端刮刮卡抽獎(jiǎng)效果完美兼容android/IOS
更新時(shí)間:2013年11月18日 16:53:07 作者:
手機(jī)完美支持html5,所以如果手機(jī)端想要做個(gè)抽獎(jiǎng)模塊的話,用刮刮卡抽獎(jiǎng)效果,相信這個(gè)互動(dòng)體驗(yàn)是非常棒的,本人親自完成,有錯(cuò)誤請(qǐng)大家指出
絕對(duì)值得看的來(lái)篇,哈哈。本人親自完成,有錯(cuò)誤請(qǐng)大家指出:
現(xiàn)在的手機(jī)完美支持html5,所以如果手機(jī)端想要做個(gè)抽獎(jiǎng)模塊的話,用刮刮卡抽獎(jiǎng)效果,相信這個(gè)互動(dòng)體驗(yàn)是非常棒的
ps:由于本人沒(méi)有wp8系統(tǒng)的手機(jī),所以沒(méi)法兼容wp8系統(tǒng)的,目前完美兼容android,IOS
如果要在pc瀏覽的話,得改下js,目前支持谷歌,火狐,ie>=10,如果網(wǎng)友想要的話我就去寫(xiě)個(gè)
代碼如下:
<!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);<!--獎(jiǎng)品圖片-->
width: 531px;
height: 438px;
}
.before{
background:none !important;
}
#canvas canvas {
cursor: url("hand.png") 0 0, auto;<!--PC端的手勢(shì)圖片-->
}
</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('您的手機(jī)不支持刮刮卡效果哦~!');
}
};
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>
現(xiàn)在的手機(jī)完美支持html5,所以如果手機(jī)端想要做個(gè)抽獎(jiǎng)模塊的話,用刮刮卡抽獎(jiǎng)效果,相信這個(gè)互動(dòng)體驗(yàn)是非常棒的
ps:由于本人沒(méi)有wp8系統(tǒng)的手機(jī),所以沒(méi)法兼容wp8系統(tǒng)的,目前完美兼容android,IOS
如果要在pc瀏覽的話,得改下js,目前支持谷歌,火狐,ie>=10,如果網(wǎng)友想要的話我就去寫(xiě)個(gè)
代碼如下:
復(fù)制代碼 代碼如下:
<!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);<!--獎(jiǎng)品圖片-->
width: 531px;
height: 438px;
}
.before{
background:none !important;
}
#canvas canvas {
cursor: url("hand.png") 0 0, auto;<!--PC端的手勢(shì)圖片-->
}
</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('您的手機(jī)不支持刮刮卡效果哦~!');
}
};
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實(shí)現(xiàn)九宮格抽獎(jiǎng)功能的示例代碼
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)
- js實(shí)現(xiàn)九宮格抽獎(jiǎng)
- php+lottery.js實(shí)現(xiàn)九宮格抽獎(jiǎng)功能
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)效果
- js輪盤抽獎(jiǎng)實(shí)例分析
- js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
- js簡(jiǎn)單抽獎(jiǎng)代碼
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
- JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)
相關(guān)文章
基于es6三點(diǎn)運(yùn)算符的使用方法(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇基于三點(diǎn)運(yùn)算符的使用方法(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法,方便一些提示重要日期的來(lái)臨,感興趣的小伙伴們可以參考一下2015-12-12JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法,以實(shí)例形式分析了輪詢操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02JavaScript匿名函數(shù)之模仿塊級(jí)作用域
這篇文章主要介紹了JavaScript匿名函數(shù)之模仿塊級(jí)作用域的相關(guān)資料,需要的朋友可以參考下2015-12-12教你5分鐘學(xué)會(huì)用requirejs(必看篇)
下面小編就為大家?guī)?lái)一篇教你5分鐘學(xué)會(huì)用requirejs(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JS實(shí)現(xiàn)簡(jiǎn)單省市二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的省市二級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度
這篇文章主要介紹了JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度,時(shí)間復(fù)雜度和空間復(fù)雜度是衡量一個(gè)算法是否優(yōu)秀的標(biāo)準(zhǔn),通常我們比較兩個(gè)算法時(shí)會(huì)用預(yù)先估算和事后統(tǒng)計(jì),下文詳細(xì)介紹,需要的朋友可以參考一下2022-07-07