HTML5 CSS3 诱人的实例 canvas 模拟实现电子彩票刮刮乐

最新推荐文章于 2022-07-15 19:15:55 发布

傻傻的装高智商

最新推荐文章于 2022-07-15 19:15:55 发布

阅读量649

点赞数

本文链接：https://blog.csdn.net/sdfwcc/article/details/84141554

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34089553

今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~

效果图：

贴一张我中500w的照片，咋办啊，怎么花呢~

好了，下面开始原理：

1、刮奖区域两个Canvas，一个是front ，一个back ，front遮盖住下面的canvas。

2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mousemove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。

很简单把~嘿嘿~

1、HTML文件内容：

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>    <script type="text/javascript" src="canvas2d.js"></script>    <script type="text/javascript" src="GuaGuaLe2.js"></script>    <script type="text/javascript">        $(function ()        {            var guaguale = new GuaGuaLe("front", "back");            guaguale.init({msg: "￥5000000.00"});        });    </script>    <style type="text/css">        body        {            background: url("s_bd.jpg") repeat 0 0;        }        .container        {            position: relative;            width: 400px;            height: 160px;            margin: 100px auto 0;            background: url(s_title.png) no-repeat 0 0;            background-size: 100% 100%;        }        #front, #back        {            position: absolute;            width: 200px;            left: 50%;            top: 100%;            margin-left: -130px;            height: 80px;            border-radius: 5px;            border: 1px solid #444;        }    </style></head><body><div class="container">    <canvas id="back" width="200" height="80"></canvas>    <canvas id="front" width="200" height="80"></canvas></div></body></