html5中canvas画布实现手机端和移动端的刮刮乐效果_html5使用canvas实现刮刮乐效果,支持桌面以及手机-优快云博客

本文将指导您如何利用HTML、CSS和JavaScript，特别是HTML5中的canvas元素，来创建一个刮刮乐游戏，并实现手机端的触摸事件交互。通过简单的代码示例，演示如何动态生成刮刮区域并实现场景的隐藏和显示效果。

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

用html5中的canvas实现刮刮乐的效果

使用html+css实现背景的样式
使用clearRect()方法实现挂去的作用
手机端使用addEventListener（）监听
手机端滑动事件touchmove

实现的效果图

此图背景是来自网络
这里写图片描述

html部分代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>刮刮乐</title>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/api.js" type="text/javascript"></script>
    <style>
        .content{
            width:900px;
            height: 500px;
        background: url("images/zj.jpg") no-repeat;
            margin: 0 auto;
overflow: hidden;
            position: relative
        }
        p{ width: 300px;height: 50px; background: #fff; margin: 0 auto; margin-top: 380px; margin-left: 360px; line-height: 50px;
        text-align: center;display: block; }
        #Canvas{ margin-left: 360px;position: absolute; bottom: 70px;cursor: pointer}
    </style>
</head>
<body>
<div class="content">
    <p>谢谢惠顾</p>
    <canvas width="300" height="50" id="Canvas">你的浏览器版本太低</canvas>
</div>
</body>
</html>

js代码：

window.onload=function(e){
        var canva=document.getElementById("Canvas");
        if(canva.getContext){
            var inghei=100;
            canva2D=canva.getContext("2d");
            canva2D.fillStyle="#ccc";
            canva2D.fillRect(0,0,300,50);
            //鼠标移动到“灰色上”
            canva.onmousemove=function(e){
                var  canavOffest = $(canva).offset();
                var canvX=Math.floor(e.pageX - canavOffest.left);
                var canvY=Math.floor(e.pageY-canavOffest.top);
                var canvY =canvY+ parseInt(inghei);
                lottery(canvX,canvY,canva2D);
            }
           function lottery(x,y,c){
            c.clearRect(x,y-inghei,20,20);

            }
            //移动端手滑动
            canva.addEventListener('touchmove',function(event){
                //如果触屏时只有一只手
                if(event.targetTouches.length == 1){
                    event.preventDefault();// 阻止浏览器默认事件，重要
                    var touch = event.targetTouches[0];
                    var  canavOffest = $(canva).offset();
                    var canvX=Math.floor(touch.pageX - canavOffest.left);
                    var canvY=Math.floor(touch.pageY-canavOffest.top);
                    var canvY =canvY+ parseInt(inghei);
                    lottery(touch.canvX,touch.canvY,canva2D);
                }

            },false);
        }
    }