相信很多小伙伴都有玩过扭蛋机，今天小编就来和大家来说说：“html中怎么使用实现扭蛋机动画效果？相关案例分享！”这个问题，下面是相关的内容分享。

　　本来兴高采烈地从网上找了一个扭蛋机动画，但是发现它是直接用css动画，把扭蛋们的动画写死了，这样我不是很喜买球入口股份有限公司欢，于是还是选择用canvas绘制扭蛋的随机动画。先写了个简单的扭蛋机Demo，效果预览

　　扭蛋机的布局比较简单，只需要在基础背景上添加一些元素就可以，最主要的是canvas标签，其他都无所谓：

　　传入扭蛋对象的值index为小球的颜色，用数字1~4表示，img是图片对象，用来绘制扭蛋。

　　主要是为扭蛋对象的原型添加上运动函数，运动函数的作用就是让扭蛋根据其速度动起来，并且在接触到边界的时候反弹。

　　开始扭蛋主要经历的过程就是点击按钮，扭蛋机扭蛋减少，获得相应扭蛋，中奖显示：

　　当然，需要最后加上init();来让扭蛋机跑起来，到这里，这个简单的扭蛋机就算完成了，效果预览

　　样式也写成display: none;，这样写是为了在js中获取img对象，当然也可以不在html中写这些img标签，直接在js文件中写：

　　代码中清除计时器都是在调用计时器之前，之所以这样做的目的，是因为不清除计时器，计时器会一直计时，导致动画越来越鬼畜。

　　在canvas画布上绘制可能会出现图像不清晰、放大的情况，这种情况可以通过将canvas标签的width和height属性设置成和样式的width和height属性相同来解决。

　　今天有关于：“html中怎么使用实现扭蛋机动画效果？相关案例分享！”这个问题的相关分享就到这边了，更多有关于html5内容我们都可以在W3Cschool中进行学习和了解。希望小编的分享可以帮助到大家。