代码示例：
html结构和css样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow: hidden;
}
#wrap,ul,li {
height: 100%;
}
ul>li {
background: url('img/b.png');
background-size: 100% 100%;
}
#can {
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="wrap">
<canvas id="can"></canvas>
<ul>
<li></li>
</ul>
</div>
</body>
js代码：
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('can');
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() {
ctx.drawImage(img,0,0,canvas.width,canvas.height);
// 添加移动端手指滑动事件
canvas.addEventListener('touchstart',function(ev){
ev = ev || event;
// 获取第一个触碰屏幕的手指
var touchC = ev.changedTouches[0];
// 获取当前触摸点的位置；
// x=当前视口位置-canvas画布的左偏移量；
// y=当前视口位置-canvas画布的上偏移量；
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
// 开始画线，因为画圆有延迟，速度快的话，会不连续；
// canvas样式设置
// 设置覆盖合成，选择保留被笔触点过的剩余部分；
// 笔触部分不保留，即笔触部分露出下面的背景
ctx.globalCompositeOperation = 'destination-out';
// 设置所画线的width
ctx.lineWidth = 40;
// 设置所画线段两端加圆
ctx.lineCap = 'round';
// 设置线段与线段拐角为圆
ctx.lineJoin = 'round';
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];
// 获取当前触摸点的位置；
// x=当前视口位置-canvas画布的左偏移量；
// y=当前视口位置-canvas画布的上偏移量；
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
// 开始画线，因为画圆有延迟，速度快的话，会不连续；
// canvas样式设置
// 设置覆盖合成，选择保留被笔触点过的剩余部分；
// 笔触部分不保留，即笔触部分露出下面的背景
ctx.globalCompositeOperation = 'destination-out';
// 设置所画线的width
ctx.lineWidth = 40;
// 设置所画线段两端加圆
ctx.lineCap = 'round';
// 设置线段与线段拐角为圆
ctx.lineJoin = 'round';
ctx.save();
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.stroke();
ctx.restore();
})
// 添加手指滑动结束事件
// 创建一个变量flag用来记录，透明度为0的像素点数量；
var flag = 0;
canvas.addEventListener('touchend',function(ev){
ev = ev || event;
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var pixAll = imgData.width * imgData.height;
// 循环遍历所有像素点
for(var i=0;i<imgData;i++) {
// 判断第i个像素点的第4个值，即透明度alpha的值是否为0
if(imgData.data[4*i+3] == 0) {
// 如果alpha的值为0，flag累加
flag++;
}
}
// 判断透明度为0的像素点是否超过像素点个数总和的一半
if(flag > pixAll/2) {
// 设置canvas画布为透明
canvas.style.opacity = 0;
}
})
// 添加过渡完成事件
canvas.addEventListener('transitionend',function(){
this.remove();
})
}
}
}
</script>
注意：当前代码在本地运行时，getImageData()方法
存在图片跨域问题，会报错。需要把代码和图片资源放到服务器上运行。
