属性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>