前端刮刮乐特效
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.guaguale{
width: 100%;
height: 100%;
background: salmon;
position: absolute;
}
.guaimg{
width: 300px;
height: 300px;
}
#can{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<div class="guaguale">
<img src="img/1106914.jpg" class="guaimg"/>
<canvas id="can" width="" height=""></canvas>
</div>
<body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
$(function(){
var c = document.getElementById('can')
var ctx = c.getContext('2d');
ctx.fillStyle="gray";
ctx.globalCompositeOperation='destination-over';
ctx.beginPath();
ctx.fillRect(0,0,300,300);
ctx.closePath();
c.ontouchmove=function(e){
var e = e.touches[0];
var x = e.clientX;
var y = e.clientY;
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
}
})
</script>
</body>
</html>
