雖然對于canvas不是很了解,但是寫這個效果確實是很常用的,看到這個資料的時候相對于來說這個代碼還是比較簡單的,所以這里先保存下來
效果展示
刮刮樂.gif
<!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= 'grey'
context.fillRect(0,0,400,300);
//鼠標(biāo)按下開刮
canvas.onmousedown=function(){
canvas.onmousemove = function(){
//獲取鼠標(biāo)坐標(biāo)
var x = event.clientX;
var y = event.clientY;
//destination-out 顯示原來的不在后來區(qū)域的部分
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.arc(x-200,y,30,0,Math.PI*2);
context.fill();
}
}
//鼠標(biāo)抬起不刮開
canvas.onmouseup=function(){
canvas.onmousemove = function(){
}
}
</script>
