手机web app开发实现刮刮卡

最新推荐文章于 2021-12-01 20:14:27 发布

转载最新推荐文章于 2021-12-01 20:14:27 发布 · 1.2k 阅读

前端设计专栏收录该内容

121 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的简单刮刮卡效果。通过鼠标操作即可清除指定区域的内容，展示出下面的分数。文章包含了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>刮刮卡</title>
    <style type="text/css">
       canvas
        {
            position:absolute;
            cursor:pointer;
        }
        #score
        {
            height:30px;
            width:100px;
            display:block;
            background:#EFEFEF;
            z-index:-1;
        }
    </style>
</head>
<body style="text-align:center">
    <canvas id="canvas_background"></canvas>
    <canvas id="score"></canvas>
    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
    <script>
        function createGG(score) {
            var canvas_score = document.querySelector('#score'), ctx_score = canvas_score.getContext('2d');
            ctx_score.font = '400 82px Consolas';
            ctx_score.fillStyle = 'Red';
            ctx_score.fillText(parseInt(score), 50, 100);

            var canvas = document.querySelector('#canvas_background'), ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(22, 22, 22)';
            ctx.fillRect(0, 0, 100, 30);

            //事件
            window.onmousedown = function (event) {
                canvas.onmousemove = function (event) {
                    ctx.clearRect(event.offsetX, event.offsetY, 20, 20);
                }
            }

            window.onmouseup = function () {
                canvas.onmousemove = function (event){ };
            }
        }
        createGG(1234);
    </script>
</body>
</html>