一、文字版
- 分为画板、奖品区、提示文字三部分
- 画板填充涂层，鼠标按下移动时清除15*15矩形，以达到视觉效果的刮涂层
- 在鼠标抬起时清除移动事件
- 奖品区随机展示一个奖品结果，利用css层级，隐藏在涂层之下
xml
复制代码
<!DOCTYPE html>
<html lang="ch-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>刮刮乐</title>
</head>
<body>
<div class="box">
<canvas width="300" height="150" id="canvas"></canvas>
<div class="prize"></div>
<div class="prompt">刮奖区</div>
</div>
</body>
<script>
window.onload = () => {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
//绘制矩形，填充涂层
ctx.fillStyle = '#999';
ctx.fillRect(0, 0, 300, 150);
//按下且移动事件
canvas.onmousedown = (e) => {
canvas.onmousemove = (e2) => {
let x = e2.clientX
let y = e2.clientY;
// 清除一个15*15的矩形区域
ctx.clearRect(x, y, 15, 15);
}
}
//清除移动事件
canvas.onmouseup = (e) => {
canvas.onmousemove = null;
}
// 随机奖品
var arr = ["奖品1", "奖品2", "奖品3", "奖品4"];
var i = Math.floor(Math.random() * arr.length);
document.getElementsByClassName("prize")[0].innerText = arr[i];
}
</script>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.prize {
position: absolute;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
font-size: 30px;
color: red;
}
#canvas {
border: 1px solid #000;
position: absolute;
z-index: 2;
}
.prompt {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
</style>
</html>
二、图片版
- 分为画板、图片区、提示文字三部分
- 画板填充涂层，鼠标按下移动时清除15*15矩形，以达到视觉效果的刮涂层
- 在鼠标抬起时清除移动事件
- 奖品区随机展示一张图片，利用css层级，隐藏在涂层之下
xml
复制代码
<!DOCTYPE html>
<html lang="ch-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>刮刮乐</title>
</head>
<body>
<div class="box">
<canvas width="300" height="150" id="canvas"></canvas>
<img class="prize" src="" alt="">
<div class="prompt">刮奖区</div>
</div>
</body>
<script>
window.onload = () => {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
//绘制矩形，填充涂层
ctx.fillStyle = '#999';
ctx.fillRect(0, 0, 300, 150);
//按下且移动事件
canvas.onmousedown = (e) => {
canvas.onmousemove = (e2) => {
let x = e2.clientX
let y = e2.clientY;
// 清除一个15*15的矩形区域
ctx.clearRect(x, y, 15, 15);
}
}
//清除移动事件
canvas.onmouseup = (e) => {
canvas.onmousemove = null;
}
// 随机奖品
var arr = ["https://p3.itc.cn/q_70/images03/20210531/ee932a2f55ba444e80320227b2e79a3a.jpeg", "http://gd-hbimg.huaban.com/28ea2e5cf17173f84ef74064e95627cc3ba75fe627e71-hKNgS4_fw658", "https://c-ssl.dtstatic.com/uploads/item/201202/23/20120223143146_xRHZy.thumb.1000_0.jpg", "http://hbimg.huaban.com/373229144a51bff1d78b09fd539a51d73d71d5c53ca80-qzvIEH_fw658"];
var i = Math.floor(Math.random() * arr.length);
console.log(arr[i]);
document.querySelector('.prize').src = arr[i]
}
</script>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
}
.prize {
position: absolute;
width: 300px;
height: 150px;
}
#canvas {
border: 1px solid #000;
position: absolute;
z-index: 2;
}
.prompt {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
</style>
</html>