利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分
效果图：
思路
1.写一个div，div的内容就是刮开后的结果；
2.画布设置好定位，将div盖住（此时是透明的）；
3.在画布上画一个长方形，并使用颜色（这里使用默认的黑色），这就把卡盖住了；
4.设置globalCompositeOperation属性为destination-out；
4.为画布添加鼠标移动事件，在鼠标的位置画一个小圆，就会达到擦除的效果了
完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
position: absolute;
left:200px;
border:1px solid ;
top: 10px;
cursor: pointer;
}
#guaguaka{
position:absolute;
left:200px;
width: 200px;
height: 60px;
top: 10px;
font-size: 40px;
text-align:center;
}
</style>
</head>
<body>
<div id='guaguaka'>
谢谢惠顾
</div>
<canvas id='canvas'></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var W = canvas.width = 200
var H = canvas.height = 60
var ctx = canvas.getContext('2d');
draw();
function draw(){
ctx.beginPath();
//绘制一个方形，用来覆盖刮刮卡的内容
ctx.fillRect(0,0,W,H);
ctx.globalCompositeOperation='destination-out';//后绘制的图形会擦除与先绘制图形重叠的部分
}
canvas.addEventListener('mousemove',function(event){
ctx.beginPath();
//鼠标移动的地方就绘制一个小圆，因为globalCompositeOperation设定了destination-out，那这个小圆会擦除之前覆盖方形的部分区域，这样就达到了刮开的效果
ctx.arc(event.offsetX,event.offsetY,10,0,2*Math.PI);
ctx.fill();
})
</script>
</body>
</html>