前端刮刮乐特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 400px;
height: 300px;
left: 200px;
position: absolute;
z-index: -1;
}
canvas {
margin-left: 200px;
}
</style>
</head>
<body>
<img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20200317/512d-iqyryku6022748.jpg" alt="">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle= '#000'
context.fillRect(0,0,400,300);
canvas.onmousedown=function(){
canvas.onmousemove = function(){
var x = event.clientX;
var y = event.clientY;
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.arc(x-200,y,30,0,Math.PI*2);
context.fill();
}
}
canvas.onmouseup=function(){
canvas.onmousemove = function(){
}
}
</script>