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

canvas实现移动端和PC端刮刮卡效果

2016-07-13 14:54 483 查看

<!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, user-scalable=no">
<title>H5刮刮卡</title>
<style>
*{
padding:0;
margin:0;
border:none;
}
.card_view{
width: 200px;
height: 100px;
line-height: 100px;
font-size: 30px;
text-align: center;
font-weight: bold;
position: absolute;
color: red;
top:100px;
left: 100px;
}
#cardCanvas{
border:1px solid #ccc;
position: absolute;
top:100px;
left: 100px;
}
</style>
</head>
<body>
<div class="card_view">
10000元
</div>
<canvas id="cardCanvas"></canvas>
<script>
document.querySelector('body').addEventListener('touchstart', function (e) {
var e=e||window.event;
e.preventDefault();
});
var c=document.getElementById('cardCanvas');
var ctx=c.getContext('2d');
c.width=200;   //画布宽
c.height=100;  //画布高
ctx.beginPath();  //画布的第一层
ctx.fillStyle="#888";
ctx.fillRect(0,0,200,100);
ctx.closePath();
//画布的第二层
ctx.font="bold 50px Microsoft Yahei";
ctx.textAlign="left";
ctx.fillStyle="#666666";
ctx.fillText("刮一刮",25,60);

ctx.globalCompositeOperation="destination-out";  //新图像和原图像重合部分变透明
//移动端
c.addEventListener('touchstart',function(e){
var e=e||window.event;
var x=e.touches[0].clientX-c.offsetLeft;
var y=e.touches[0].clientY-c.offsetTop;
ctx.moveTo(x,y)
c.addEventListener('touchmove',gmove,false)
},false)
c.addEventListener('touchend',function(){
clearC();
},false)

//PC端
c.addEventListener('mousedown',function(e){
var e=e||window.event;
var x=e.clientX-c.offsetLeft;
var y=e.clientY-c.offsetTop;
ctx.moveTo(x,y)
c.addEventListener('mousemove',gmove,false)
},false)
c.addEventListener('mouseup',function(){
clearC();
c.removeEventListener('mousemove',gmove,false)
},false)

function gmove(e){                //刮卡函数
if(typeof e.touches!='undefined'){
e=e.touches[0];
}
var mx=e.clientX-c.offsetLeft;
var my=e.clientY-c.offsetTop;
ctx.strokeStyle="white";
ctx.lineCap="round";    //绘制的线结束时为圆形
ctx.lineJoin="round";   //当两条线交汇时创建圆形边角
ctx.lineWidth=20;
ctx.lineTo(mx,my);
ctx.stroke();
}

function clearC(){              //刮开一定面积执行擦除画布函数
var data=ctx.getImageData(0,0,c.width,c.height).data;
for(var i=0,j=0;i<data.length;i+=4){   //data.length=c.width*c.heigth*4,一个像素块是一个对象RGBA四个值,A范围为0~255
if(data[i]&&data[i+1]&&data[i+2]&&data[i+3]){      //存在imageData对象时j加1  PS:该像素区域透明即为不存在该对象
j++;
}
}
if(j<=c.width*c.height*0.2){          //超过canvas面积的20%，就清除画布
ctx.clearRect(0,0,c.width,c.height);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript canvas html5

相关文章推荐

新的分享

章节导航