.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 = [];//扭蛋机中的小球集合
var timer;//计时器
var award = document.getElementById('awardBall');
var message = document.getElementById('message');
扭蛋对象
扭蛋机里面每个扭蛋都是一个对象，所以需要定义一个扭蛋对象：
function Ball(index, img) {
this.r = 30;//小球半径
this.x = this.rand(canvas.width - this.r * 2);//小球初始横坐标
this.y = this.rand(canvas.height - this.r * 2);//小球初始纵坐标
this.color = index;//小球颜色，以下标表示
this.img = img;//小球素材
do {
this.speedX = this.rand(20) - 10;
} while (this.speedX < 5);//小球横坐标改变速度
do {
this.speedY = this.rand(20) - 10;
} while (this.speedY < 5);//小球纵坐标改变速度
}
传入扭蛋对象的值index为小球的颜色，用数字1~4表示，img是图片对象，用来绘制扭蛋。
扭蛋方法
在上一步已经为扭蛋添加了属性，接下来就是给扭蛋添加方法：
Ball.prototype = {
rand: function (num) {//随机数
return Math.random() * num;
},
run: function () {//小球运动函数
this.x += this.speedX;
this.y += this.speedY;
if (this.x > canvas.width - this.r * 2) {//小球碰到右边界，横坐标速度变为负
this.speedX = -this.speedX;
}
if (this.x < 0) {//小球碰到左边界，横坐标速度变为正
this.speedX = Math.abs(this.speedX);
}
if (this.y > canvas.height - this.r * 2) {//小球碰到下边界，纵坐标速度变为负
