<!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>刮刮乐</title>
<style>
.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;
}
</style>
</head>
<body>
<canvas id='canvas' width="300" height="150"></canvas>
<div class="prize"></div>
<script>
window.onload = function(){
//获取画布对象
var canvas = document.querySelector('#canvas');
// 获取二维绘图对象
var ctx = canvas.getContext('2d');
// 遮罩颜色
ctx.fillStyle = "#999";
ctx.fillRect(0,0,300,150);
// 鼠标按下
canvas.onmousedown = function(){
// 鼠标移动
canvas.onmousemove = function(e){
//清除
ctx.clearRect(e.clientX,e.clientY,15,15);
}
}
// 鼠标放开
canvas.onmouseup = function(){
canvas.onmousemove = null;
}
// 奖项设置
var arr = ["特等奖","一等奖","一等奖","二等奖","二等奖","二等奖","二等奖",
"二等奖","二等奖","二等奖","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与"];
// 随机取
var i = Math.floor(Math.random()*arr.length);
document.querySelector('.prize').innerHTML = arr[i];
}
</script>
</body>
</html>
用canvas画个刮刮乐吧
最新推荐文章于 2023-11-14 17:28:24 发布