提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

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

AndroidiosJShtml5手机 实现 完美 效果
2023-06-13 09:15:12 时间
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出：
现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的
​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS
如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个
代码如下:
复制代码代码如下:

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>erasereffect</title>
<scripttype="text/javascript"src="jquery.core.js"></script>
<style>
#canvas{
background:url(winning-ticket.jpg);<!--奖品图片-->
width:531px;
height:438px;
}
.before{
background:none!important;
}
#canvascanvas{
cursor:url("hand.png")00,auto;<!--PC端的手势图片-->
}
</style>
</head>
<bodyoncontextmenu="returnfalse;"onselectstart="returnfalse;">
<divid="canvas"></div>
</body>
<scripttype="text/javascript">
(function(){
window.onload=function(){
/**判断浏览器是否支持canvas**/
try{
document.createElement("canvas").getContext("2d");
}catch(e){
varaddDiv=document.createElement("div");
alert("您的手机不支持刮刮卡效果哦~!");
}
};
varu=navigator.userAgent,mobile="";
if(u.indexOf("iPhone")>-1)mobile="iphone";
if(u.indexOf("Android")>-1||u.indexOf("Linux")>-1)mobile="Android";
functioncreateCanvas(parent,width,height){
varcanvas={};
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);
returncanvas;
}
functioninit(container,width,height,fillColor,type){
varcanvas=createCanvas(container,width,height);
varctx=canvas.context;
//defineacustomfillCirclemethod
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"){
varx=e.changedTouches[0].pageX-this.offsetLeft;
vary=e.changedTouches[0].pageY-this.offsetTop;
}else{
varx=e.pageX-this.offsetLeft;
vary=e.pageY-this.offsetTop;
}
varradius=20;
varfillColor="#ff0000";
ctx.globalCompositeOperation="destination-out";
ctx.fillCircle(x,y,radius,fillColor);
},false);
}
varcontainer=document.getElementById("canvas");
init(container,531,438,"#ff0000",mobile);
})();
</script>
</html>

相关文章