完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
*{margin: 0%;padding: 0%;}
html,body{
height: 100%;
overflow: hidden;
}
#wrap,ul,ul>li{
height: 100%;
}
ul>li{
background:url('image/兔年.png');
background-size: 100% 100%;
}
canvas{
position: absolute;
left: 0%;
top: 0%;
transition: 2s;
}
</style>
</head>
<body>
<div id="wrap">
<canvas ></canvas>
<ul>
<li>
</li>
</ul>
</div>
</body>
<script>
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="image/虎年.png";
img.onload=function(){
draw();
}
function draw(){
ctx.drawImage(img,0,0,canvas.width,canvas.height)
var flag=0;
canvas.addEventListener("touchstart",function(event){
event=event||window.event;
var touchC=event.changedTouches[0];
var x=touchC.clientX-canvas.offsetLeft;
var y=touchC.clientY-canvas.offsetTop;
ctx.lineWidth=25;
ctx.lineJoin="round";
ctx.lineCap="round";
ctx.save();
ctx.beginPath();
moveTo(x,y)
ctx.lineTo(x+1,y+1);
ctx.stroke()
ctx.restore();
})
canvas.addEventListener("touchmove",function(event){
event=event||window.event;
var touchC=event.changedTouches[0];
var x=touchC.clientX-canvas.offsetLeft;
var y=touchC.clientY-canvas.offsetTop;
ctx.save()
ctx.globalCompositeOperation="destination-out"
ctx.lineTo(x,y);
ctx.stroke()();
ctx.restore();
})
canvas.addEventListener("touchend",function(){
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var allPx=canvas.height*canvas.width;
for(var i=0;i<allPx;i++)
if(imgData.data[i*4+3]===0)
flag++;
if(flag>=allPx/2){
this.style.opacity=0;
}
})
canvas.addEventListener("transitionend",function(){
this.remove()
})
}
}
}
</script>
</html>