继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

canvas— —刮刮乐

FFIVE
关注TA
已关注
手记 436
粉丝 70
获赞 459

今天,结合上一篇文章的抽奖小游戏,
用canvas来写一个小游戏——刮刮乐。
首先,用canvas做一个画布,宽高各为200px。然后再把一个span标签定位到画布上。


webp


效果如下所示


webp


接下来获取一下canvas标签,定义一个数组,之后用canvas画一个灰色的正方形把这部分给盖住。

webp


效果如下

webp


用canvas创建一个透明的圆,当鼠标移动时,清除canvas上的灰色图层,显示下面的文字(一等奖)。

webp

效果如下

webp


最后,我们让刚开始定义的数组打乱随机,然后要清除灰色的图层时,显示不同的几等奖。


webp


效果如下

webp

希望对各位有所帮助,谢谢!



作者:单纯的色狼
链接:https://www.jianshu.com/p/04222c3af447


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP