canvas模拟实现电子彩票刮刮乐

2020-11-27 来源：钮旅网

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

效果图：

canvas 模拟实现电子彩票刮刮乐

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

canvas 模拟实现电子彩票刮刮乐

好了，下面开始原理：

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> 
 
<p class="container"> 
 <canvas id="back" width="200" height="80"></canvas> 
 <canvas id="front" width="200" height="80"></canvas> 
</p> 
 
 
</body> 
</html>

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

这个类也就对Canvas对象进行了简单的封装，设置参数，绘制图形什么的，比较简单，大家可以完善下这个类~

3、GuaGuaLe.js

通过用户传入的两个canvas的id，然后生成一个对象，进行初始化操作，设置事件。当然了也提供用户设置可选的参数，各种颜色，已经刮开后显示的信息等，通过

传给init方法进行设置。

好了，然后就基本完工了，测试一下：

基本实现了刮开图层，但是存在一个小问题，就是当用户滑动特别快时，会出现一些断点，当然也可以忽略，不过我们准备提供一下解决方案：

canvas 模拟实现电子彩票刮刮乐

产生原因：由于鼠标移动速度过快，产生的断点；解决方案：将mousemove中两次的鼠标左边，进行拆分成多个断点坐标：

canvas 模拟实现电子彩票刮刮乐

如上图，把两点之间进行连线，根据斜率，然后分成多个小段，分别获得线段上的坐标（有四种可能，有兴趣可以画画图，计算下，代码如下）：

4、最后贴一下完整的GuaGuaLe.js

显示全文

全部栏目

canvas模拟实现电子彩票刮刮乐