html5中canvas画布实现手机端和移动端的刮刮乐效果

发布时间:2020-09-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了html5中canvas画布实现手机端和移动端的刮刮乐效果编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用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);
        }
    }

本文代码:
http://download.csdn.net/detail/wu_niang/9436630

总结

以上是编程之家为你收集整理的html5中canvas画布实现手机端和移动端的刮刮乐效果全部内容,希望文章能够帮你解决html5中canvas画布实现手机端和移动端的刮刮乐效果所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!