canvas实现刮刮乐

最新推荐文章于 2024-01-24 14:45:51 发布

Erosion_destiny

最新推荐文章于 2024-01-24 14:45:51 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_38651504/article/details/103727654

版权

<!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>
    <canvas width="300" height="150" id="canvas"></canvas>
    <div class="prize"></div>
</body>
<script>
    window.onload = () => {
        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext('2d');
        //绘制矩形
        ctx.fillStyle = '#c0c0c0';
        ctx.fillRect(0,0,300,150);
        canvas.onmousedown = () => {   //按下的事件
            canvas.onmousemove = (e2) => {
                ctx.clearRect(e2.clientX, e2.clientY, 10, 10);  //清除
            }
        }
        canvas.onmouseup = (e) => {   //松开事件
            canvas.onmousemove = null;  //清除事件  事件清除直接用null
        }
		//中奖信息
        var arr = ["奖品1","奖品2","奖品3","奖品4"];
        var i = Math.floor(Math.random()*arr.length);
        document.getElementsByClassName("prize")[0].innerText = arr[i];
    }
 
</script>
<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>
</html>

Erosion_destiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现刮刮乐

<!DOCTYPE html><html lang="ch-en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫