Utilice el atributo globalCompositeOperation para establecer el valor en destino-out, y los gráficos dibujados más tarde borrarán la parte superpuesta de los gráficos dibujados primero
Imagen de efecto:
Ideas
1. Escriba un div, el contenido del div es el resultado después de raspar;
2. Establezca la posición del lienzo y cubra el div (es transparente en este momento);
3. Dibuje un rectángulo en el lienzo y use el color (aquí se usa el negro predeterminado), que cubrirá la tarjeta;
4. Establezca la propiedad globalCompositeOperation en destination-out;
4. Agregue un evento de movimiento del mouse al lienzo, dibuje un pequeño círculo en la posición del mouse y se logrará el efecto de borrar
Código completo
<!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>