效果图
微信截图_20220901134945.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>呱呱乐</title>
<style>
body {
margin: 0;
}
.result {
width: 400px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 40px;
font-weight: bold;
display: none;
}
#canvas {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="result">一等奖</div>
<canvas id="canvas" width="400" height="200"></canvas>
</body>
</html>
<script>
let canvas = document.getElementById('canvas');
let width = canvas.width;
let height = canvas.height;
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.rect(0, 0, width, height);
ctx.fill();
let mouseDown = false;
let clearW = 10;
let clearH = 10;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', function(e) {
mouseDown = true;
lastX = e.clientX;
lastY = e.clientY;
});
canvas.addEventListener('mousemove', function(e) {
if (!mouseDown) {
return;
}
let difX = Math.abs(lastX - e.clientX);
let difY = Math.abs(lastY - e.clientY);
let count = Math.max(difX, difY);
// 避免滑动距离过大,中间出现空白
for (let i = 0; i <= count;i++) {
let x = lastX + Math.floor((e.clientX - lastX)/count*i);
let y = lastY + Math.floor((e.clientY - lastY)/count*i);
ctx.clearRect(x - clearW/2, y - clearH/2, clearW, clearH);
}
lastX = e.clientX;
lastY = e.clientY;
});
canvas.addEventListener('mouseup', function() {
mouseDown = false;
});
document.querySelector('.result').style = "display: block";
</script>
