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

.dropBall3 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/3.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}
.dropBall4 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/4.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}

@keyframes drop {
0% {
transform: scale(0.7);
}
50% {
transform: scale(1);
}
51% {
transform: translateY(0px);
}
100% {
transform: translateY(100px);
}
}

@-webkit-keyframes drop {
0% {
-webkit-transform: scale(0.7);
}
50% {
-webkit-transform: scale(1);
}
51% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(100px);
}
}

结束

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

总结

虽然这个Demo比较简单，但是还是有一些注意点和一些可优化的地方。

注意点

img对象

在html中的这些img标签：

<img src="img/1.png" id="ball1" class="imgSrc">
<img src="img/2.png" id="ball2" class="imgSrc">
<img src="img/3.png" id="ball3" class="imgSrc">
<img src="img/4.png" id="ball4" class="imgSrc">

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

var img = new Image();
img.src = 'img/1.png';

这样子也可以得到img对象，也可以用来绘制扭蛋。

清除计时器

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

画布

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