1、利用css将<li>与<canvas>层重叠；
- html
<body>
<div id="wrap">
<!-- 灰色涂层 -->
<canvas></canvas>
<!-- 刮卡结果 -->
<ul>
<li></li>
</ul>
</div>
</body>
- css
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap,ul,ul>li{
height: 100%;
}
ul>li{
background: url(img/b.png);
background-size: 100% 100%;
}
canvas{
/* 利用绝对定位让灰色涂层与刮卡结果重叠 */
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
</style>
- 在canvas画布上绘制刮刮卡图层图像；
var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if(canvas.getContext){
var ctx = canvas.getContext("2d")
var img = new Image()
img.src = "img/a.png"
img.onload = function(){
draw()
}
function draw(){
var flag = 0 //用于后面统计刮开百分比
ctx.drawImage(img,0,0,canvas.width,canvas.height)
}
3、在canvas画布区域监听鼠标事件或触摸事件；
// 监听鼠标和touch事件
canvas.addEventListener('mousedown', moveStart, false);
canvas.addEventListener('touchstart', moveStart, false);
canvas.addEventListener('mousemove', move, false);
canvas.addEventListener('touchmove', move, false);
canvas.addEventListener('mouseup', moveEnd, false);
canvas.addEventListener('touchend', moveEnd, false);
4、在手指移动过程中，实时计算手指在画布中的位置以及移动路径，利用canvas的globalCompositeOperation方法中的destination-out效果将刮过的地方设置为透明从而实现刮卡的效果；
canvas.addEventListener("touchstart",function(ev){
ev = ev||event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
//画线，解决快速画圆bug
ctx.lineWidth = 40
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.globalCompositeOperation="destination-out";
ctx.save();
ctx.beginPath();
ctx.moveTo(x,y)
ctx.lineTo(x+1,y+1)
ctx.stroke()
ctx.restore()
})
canvas.addEventListener("touchmove",function(ev){
ev = ev||event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
ctx.save();
ctx.lineTo(x,y)
ctx.stroke()
ctx.restore()
})
5、设置当canvas涂层被刮到一定百分比时去除整个涂层；
- 利用canvas的getImageData可以获取指定范围区域的每个像素点的rgba的信息，其中a指的是透明度，当a为0时，该像素点完全透明，当a为255时，表示该像素点完全不透明；
- 通过遍历指定区域的像素点信息，得到透明像素点的个数
- 透明像素点的个数/总像素点的个数=刮开区域所占百分比
- 通过设置阈值，使得当所刮区域占比满足一定值时，刮开整个canvas涂层；
canvas.addEventListener("touchend",function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
var allPx = imgData.width*imgData.height
for(var i = 0;i<allPx;i++){
if(imgData.data[i*4+3]===0){
flag++
}
}
if(flag>=allPx/2){
canvas.style.opacity = 0
}
})
6、全部刮开以后，删canvas层
canvas.addEventListener("transitionend",function(){
this.remove() //自杀，删除canvas
})
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap,ul,ul>li{
height: 100%;
}
ul>li{
background: url(img/b.png);
background-size: 100% 100%;
}
canvas{
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
</style>
</head>
<body>
<div id="wrap">
<canvas></canvas>
<ul>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if(canvas.getContext){
var ctx = canvas.getContext("2d")
var img = new Image()
img.src = "img/a.png"
img.onload = function(){
draw()
}
function draw(){
var flag = 0
ctx.drawImage(img,0,0,canvas.width,canvas.height)
canvas.addEventListener("touchstart",function(ev){
ev = ev||event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
ctx.lineWidth = 40
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.globalCompositeOperation="destination-out";
ctx.save();
ctx.beginPath();
ctx.moveTo(x,y)
ctx.lineTo(x+1,y+1)
ctx.stroke()
ctx.restore()
})
canvas.addEventListener("touchmove",function(ev){
ev = ev||event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
ctx.save();
ctx.lineTo(x,y)
ctx.stroke()
ctx.restore()
})
canvas.addEventListener("touchend",function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
var allPx = imgData.width*imgData.height
for(var i = 0;i<allPx;i++){
if(imgData.data[i*4+3]===0){
flag++
}
}
if(flag>=allPx/2){
canvas.style.opacity = 0
}
})
canvas.addEventListener("transitionend",function(){
this.remove() //自杀，删除canvas
})
}
}
}
</script>
</html>
