canvas实现扭蛋机动画效果的示例代码_vue扭蛋机,vue扭蛋机

canvas

1星 30 浏览量更新于2023-03-03 评论收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

canvas实现扭蛋机动画效果的示例代码实现扭蛋机动画效果的示例代码

主要介绍了canvas实现扭蛋机动画效果的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

转眼间，已经实习了两个月了，公司每个月都有个会员日的活动要做，这个月的任务是做一个扭蛋机抽奖的活动，数据什么的都有接口，那么前端剩下最大的任务就只剩下扭蛋机的动画实现了。

背景背景

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

果预览

开始开始

布局布局

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

</div>

附上样式表：

body {margin: 0;padding: 0;border: none;}

.bg {background: url(../img/bg.png) top no-repeat;background-size: 100%;overflow: hidden;position: absolute;width: 400px;height: 100%;margin-top: 0;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

#message {position: absolute;text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

.lotterybg {background: url(../img/lotterybg.png) top no-repeat;background-size: 100%;overflow: visible;width: 80%;height: 100%;margin-top: 160px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

#myCanvas {position: absolute;border: none;width: 285px;height: 170px;margin-top: 15px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}

#start {position: absolute;z-index: 3;width: 202px;margin-top: 413px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

.imgSrc {display: none;position: absolute;}

.award {position: absolute;border: none;width: 60px;height: 200px;top: 470px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

这样子布局就算完成了，接下来主要工作就在canvas绘制图像上了。

扭蛋动画扭蛋动画

先把各种变量定义好：

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var ball1 = document.getElementById('ball1');//图片对象

var ball2 = document.getElementById('ball2');//图片对象

var ball3 = document.getElementById('ball3');//图片对象

var ball4 = document.getElementById('ball4');//图片对象

var ballList = [ball1, ball2, ball3, ball4];//图片对象数组

var ballNum = 4;//扭蛋机里面的小球数

var awardList = [];//扭蛋机中的小球集合