时间：2021-07-01 10:21:17 帮助过：12人阅读
效果图：
贴一张我中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>
<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方法进行设置。
好了，然后就基本完工了，测试一下：
基本实现了刮开图层，但是存在一个小问题，就是当用户滑动特别快时，会出现一些断点，当然也可以忽略，不过我们准备提供一下解决方案：
产生原因：由于鼠标移动速度过快，产生的断点；解决方案：将mousemove中两次的鼠标左边，进行拆分成多个断点坐标：
如上图，把两点之间进行连线，根据斜率，然后分成多个小段，分别获得线段上的坐标（有四种可能，有兴趣可以画画图，计算下，代码如下）：
4、最后贴一下完整的GuaGuaLe.js
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多canvas 模拟实现电子彩票刮刮乐相关文章请关注PHP中文网！