本文介绍如何利用HTML5的Canvas元素实现刮刮乐效果。通过设置不同z-index的Canvas层来创建遮罩，利用触摸事件和Canvas的绘图功能实现刮擦效果。文中详细解释了代码逻辑，并提供了实现思路和注意事项。
其实有很多地方都会用到这种刮刮乐的效果
有两个想法
1.设置两个canvas 的不同的 z-index 来设置其前后 形成遮罩层的效果 后面的一个canvas 实现绘图功能 前面一个canvas实现清除刮奖涂层的功能 当然也可以用一个canvas 在你别清除了时候边绘制（那样会过于占用资源 而且自我觉得实现麻烦没有采用）
2.一个div用来显示图片或者文字 canvas设置z-index做蒙版在上面 然后实现刮得效果。
遇到的问题
当两个canvas做层叠的时候 会因为透明而实现不了效果 还有你绘制的图片被遮挡 并不能显示出来
SO 自己采用了第二种方法
具体代码及其解释会在下文为大家呈现
<!-- 网页部分-->
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" name="viewport" content="width=640,user-scalable=no,minimal-ui" /> <!--禁止用户缩放-->
</head>
<body>
<div style="width:640px;margin:auto;">
<!--刮刮乐-->
<div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
<div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">即兴彩票</div>
<div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column; position:relative;">
<!--此处为另一个效果 具体就不说了 如果上线为游戏欢迎大家试玩 -->
@*<div style=" width: 300px;height: 200px; position:absolute;">
<div style=" width: 300px;height: 200px; z-index: 1; ">
<div id="div_one" style="height: 100px; width: 100px; float: left; background-color: #0480BE;"></div>
<div id="div_two" style="height: 100px; width: 100px; float: left; background-color:#004444"></div>
<div id="div_three" style="height: 100px; width: 100px; float: right; background-color: #005580; "></div>
<div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; background-color: #149BDF;"></
最低0.47元/天 解锁文章
4604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
