前端之家收集整理的这篇文章主要介绍了
canvas实现扭蛋机动画效果的示例代码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
转眼间,已经实习了两个月了,公司每个月都有个会员日的活动要做,这个月的任务是做一个扭蛋机抽奖的活动,数据什么的都有接口,那么前端剩下最大的任务就只剩下扭蛋机的动画实现了。
背景
本来兴高采烈地从网上找了一个扭蛋机动画,但是发现它是直接用css动画,把扭蛋们的动画写死了,这样我不是很喜欢,于是还是选择用canvas绘制扭蛋的
随机动画。先写了个简单的扭蛋机Demo,
效果预览
开始
布局
扭蛋机的布局比较简单,只需要在基础背景上
添加一些元素就可以,最主要的是canvas
标签,其他都无所谓: