本文摘自PHP中文网，作者零下一度，侵删。
今天，结合上一篇文章的抽奖小游戏，用canvas来写一个小游戏――刮刮乐。
首先，用canvas做一个画布，宽高各为200px。然后再把一个span标签定位到画布上。
效果如下所示
接下来获取一下canvas标签，定义一个数组，之后用canvas画一个灰色的正方形把这部分给盖住。
效果如下
用canvas创建一个透明的圆，当鼠标移动时，清除canvas上的灰色图层，显示下面的文字（一等奖）。
效果如下
最后，我们让刚开始定义的数组打乱随机，然后要清除灰色的图层时，显示不同的几等奖。
效果如下
希望对各位有所帮助，谢谢！
以上就是关于canvas的一个实例教程--刮刮乐的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
借助todataurl实现将html5 canvas的内容保存为图片
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
