canvas擦拭效果-刮刮卡
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>刮刮卡</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
body,div{padding: 0; margin: 0;}
.wrap {
width: 320px;
height: 400px;
background: url('http://s1.ifengimg.com/2015/05/27/14a99b65f24474a81530c6f642c1ef4f.jpg') 0 0 no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="con" class="wrap">
<canvas id="myCanvas" width="320" height="400"></canvas>
</div>
<script>
var myCanvas = document.getElementById('myCanvas');
var gray = myCanvas.getContext('2d');
gray.beginPath();
gray.fillStyle = "#999";
gray.fillRect(0,0,320,400);
gray.closePath();
gray.globalCompositeOperation="destination-out";
myCanvas.addEventListener('touchmove', function(e){
e.preventDefault();
gray.beginPath();
gray.fillStyle = "#f00";
gray.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 20, 0, Math.PI*2);
gray.fill();
gray.closePath();
}, false);
myCanvas.addEventListener('touchend', function(e){
e.preventDefault();
var num = 0;
var datas = gray.getImageData(0,0,320,400);//画布中像素点属性
for (var i = 0; i < datas.data.length; i++) {
if (datas.data[i] == 0) {
num++;
};
};
if (num >= datas.data.length * 0.7) {
gray.fillRect(0,0,320,400);
};
}, false);
</script>
</body>
</html>
TJ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link rel="stylesheet" href="http://s0.ifengimg.com/2016/03/30/style_e14bff55.css">
<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
</head>
<body>
<section>
<h1 class="scrape-title imgBox">
<img src="http://s0.ifengimg.com/2016/03/29/sec2_tt_5b5367e8.png">
</h1>
<div class="award">
<div class="canvas_bg_1" style="display: none;"><img src="http://s0.ifengimg.com/2016/03/29/cbg1_0b525d45.png" /></div>
<div class="canvas_bg_2"><img src="http://s0.ifengimg.com/2016/03/29/cbg2_79dd3c21.png" /></div>
<div class="award-wrap">
<div class="award-txt">
<h4 style="display: none;"><&$gift&></h4>
<p style="display: none;">凭此页面截图详询工作人员领取</p>
<canvas id="awardCanvas"></canvas>
</div>
</div>
</div>
</section>
<script>
$("html").css("fontSize",$(window).width()/64 + "px");//1rem = 640 / 64
$(document).ready(function(){
var awardCanvas = document.getElementById('awardCanvas');
var img = new Image();
img.src = $(".canvas_bg_2 img").attr("src");
var timer = setInterval(function(){
if(img.complete){
clearInterval(timer);
img = null;
var offsetTop = $(".award-txt").offset().top;
var offsetLeft = $(".award-txt").offset().left;
var w = $(".award-txt").width();
var h = $(".award-txt").height();
if(awardCanvas){
awardCanvas.width = w;
awardCanvas.height = h;
$(".award-txt h4").show();
$(".award-txt p").show();
var gray = awardCanvas.getContext('2d');
gray.beginPath();
gray.fillStyle = "#d3d3d3";
gray.fillRect(0,0,w,h);
gray.closePath();
gray.globalCompositeOperation="destination-out";
document.addEventListener('touchstart', function(e){
e.preventDefault();
awardCanvas.addEventListener('touchmove', function(e){
e.preventDefault();
gray.beginPath();
//gray.fillStyle = "#f00";
gray.arc(e.targetTouches[0].clientX - offsetLeft, e.targetTouches[0].clientY - offsetTop, 20, 0, Math.PI*2);
gray.fill();
gray.closePath();
}, false);
awardCanvas.addEventListener('touchend', function(e){
e.preventDefault();
var num = 0;
var datas = gray.getImageData(0,0,w,h);//画布中像素点属性
for (var i = 0; i < datas.data.length; i++) {
if (datas.data[i] == 0) {
num++;
};
};
if (num >= datas.data.length * 0.4) {
gray.fillRect(0,0,w,h);
$('#awardCanvas').hide();
$('.canvas_bg_2').hide();
$('.canvas_bg_1').show();
};
}, false);
});
}
}
}, 50);
});
</script>
</body>
</html>
浙公网安备 33010602011771号