优源码

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
优源码 首页 博客 查看内容

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

2015-7-3 14:17| 发布者: discuzadmin| 查看: 1788| 评论: 0|来自: Hongyang

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

效果图:

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

好了,下面开始原理:

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

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

很简单把~嘿嘿~

1、HTML文件内容:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8">  
  6.   
  7.     <script type="text/javascript" src="../../jquery-1.8.3.js"></script>  
  8.     <script type="text/javascript" src="canvas2d.js"></script>  
  9.   
  10.     <script type="text/javascript" src="GuaGuaLe2.js"></script>  
  11.   
  12.     <script type="text/javascript">  
  13.   
  14.         $(function ()  
  15.         {  
  16.             var guaguale = new GuaGuaLe("front", "back");  
  17.             guaguale.init({msg: "¥5000000.00"});  
  18.         });  
  19.     </script>  
  20.     <style type="text/css">  
  21.   
  22.   
  23.         body  
  24.         {  
  25.             background: url("s_bd.jpg") repeat 0 0;  
  26.         }  
  27.   
  28.         .container  
  29.         {  
  30.             position: relative;  
  31.             width: 400px;  
  32.             height: 160px;  
  33.             margin: 100px auto 0;  
  34.             background: url(s_title.png) no-repeat 0 0;  
  35.             background-size: 100% 100%;  
  36.         }  
  37.   
  38.         #front, #back  
  39.         {  
  40.             position: absolute;  
  41.             width: 200px;  
  42.             left: 50%;  
  43.             top: 100%;  
  44.             margin-left: -130px;  
  45.             height: 80px;  
  46.             border-radius: 5px;  
  47.             border: 1px solid #444;  
  48.         }  
  49.   
  50.     </style>  
  51.   
  52. </head>  
  53. <body>  
  54.   
  55. <div class="container">  
  56.     <canvas id="back" width="200" height="80"></canvas>  
  57.     <canvas id="front" width="200" height="80"></canvas>  
  58. </div>  
  59.   
  60.   
  61. </body>  
  62. </html>  




2、首先我利用了一个以前写的canvas辅助类,留下来今天要用的一些方法:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  * Created with JetBrains WebStorm. 
  3.  * User: zhy 
  4.  * Date: 13-12-17 
  5.  * Time: 下午9:42 
  6.  * To change this template use File | Settings | File Templates. 
  7.  */  
  8.   
  9. function Canvas2D($canvas)  
  10. {  
  11.     var context = $canvas[0].getContext("2d"),  
  12.         width = $canvas[0].width,  
  13.         height = $canvas[0].height,  
  14.         pageOffset = $canvas.offset();  
  15.   
  16.   
  17.     context.font = "24px Verdana, Geneva, sans-serif";  
  18.     context.textBaseline = "top";  
  19.   
  20.   
  21.     /** 

免责声明|优源码 | |

GMT+8, 2017-1-23 14:23

本站所有资源来自互联网或网友分享,仅可用于学习,不可商用,否则后果自负。

© 2012-2015 uyuanma.com