使用帆布怎么实现一个扭蛋机动画效果

　　介绍

使用帆布怎么实现一个扭蛋机动画效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>布局

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

& lt; div 类=癰g"比; 　　,,,& lt; span id=癿essage"在点击抽奖& lt;/span> 　　,,,& lt; div 类=發otterybg"比; 　　,,,,,,,& lt; canvas id=癿yCanvas",宽度=?85 px",身高=?70 px"祝辞& lt;/canvas> 　　,,,,,,,& lt; img src=https://www.yisu.com/zixun/癷mg/lighting.png”class="灯光"/> 　　

　　%20%20%20

　　%20body {保证金:0;填充:0;边界:,没有;} 　　.bg {背景:url%20(.%20./img/bg.png), top 不再重演;background-size:, 100%;溢出:,隐藏;位置:,绝对的,宽度:,400 px;高度:,100%;margin-top:, 0; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);} 　　# message {text-align:位置:,绝对;中心;高度:,25 px;字体大小:,22 px; margin-top:, 110 px; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);} 　　.lotterybg {背景:url (. ./img/lotterybg.png), top 不再重演;background-size:, 100%;溢出:,可见;宽度:,80%;高度:,100%;margin-top:, 160 px; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);} 　　# myCanvas {位置:,绝对;边界:,没有;宽度:,285 px;高度:,170 px; margin-top:, 15 px; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);} 　　.lighting {显示:块;max-width:, 99%; margin-top:, 0; margin-left:, 0;} 　　# start {绝对位置:,,z - index: 3;宽度:,202 px; margin-top:, 413 px; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);} 　　.imgSrc {位置:显示:没有;绝对;} 　　.award {位置:,绝对;边界:,没有;宽度:,60 px;高度:,200 px;:, 470 px; margin-left:, 50%; -webkit-transform:,翻译(-50%);-moz-transform:,翻译(-50%);-ms-transform:,翻译(-50%);-o-transform:,翻译(-50%);变换:,翻译(-50%);}

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

<>强扭蛋动画

先把各种变量定义好:

var canvas =, . getelementbyid (& # 39; myCanvas& # 39;); 　　var ctx =, canvas.getContext (& # 39; 2 d # 39;); 　　var ball1 =, . getelementbyid (& # 39; ball1& # 39;);//图片对象　　var ball2 =, . getelementbyid (& # 39; ball2& # 39;);//图片对象　　var ball3 =, . getelementbyid (& # 39; ball3& # 39;);//图片对象　　var ball4 =, . getelementbyid (& # 39; ball4& # 39;);//图片对象　　(ball1 var ballList =,,, ball2,, ball3,, ball4);//图片对象数组　　var ballNum =, 4;//扭蛋机里面的小球数　　var awardList =,[];//扭蛋机中的小球集合　　var 计时器;//计时器　　var award =, . getelementbyid (& # 39; awardBall& # 39;); 　　var message =, . getelementbyid(& # 39;消息# 39;);

<>强扭蛋对象

扭蛋机里面每个扭蛋都是一个对象,所以需要定义一个扭蛋对象:

function 球(指数,img), { 　　,,,this.r =, 30;//小球半径　　,,,this.x =, this.rand (canvas.width 安康;this.r *, 2);//小球初始横坐标　　,,,this.y =, this.rand (canvas.height 安康;this.r *, 2);//小球初始纵坐标　　,,,this.color =,指数;//小球颜色,以下标表示　　,,,this.img =, img;//小球素材　　,,,do { 　　,,,,,,,this.speedX =, this.rand(20),安康;10; 　　,,,},while (this.speedX & lt;, 5);//小球横坐标改变速度　　,,,do { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null