                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

怎么让小球只往左边跑啊.

var CANVAS_WIDTH = 1366;	//设置cnavas的画布大小
var CANVAS_HEIGHT = 600;
var RADIUS = 8;	//设置组成的小球的半径大小
var MARGIN_LEFT = 30;	//设置数字之间的间距
var MARGIN_TOP = 10;	//设置数字离顶部的间距

//倒计时结束的时间
const endTime = new Date(2015,7,22,19,25,34);
var curShowTimeSec = 0;

var balls=[]; //用于保存需要生成的彩色的小球
//设置生成小球的颜色
var colors = ["#33b5e5","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];



window.onload = function(){
//初始化canvas对象,并得到context上下文对象
var canvas = document.getElementById("canvas");
canvas.height = CANVAS_HEIGHT;
canvas.width = CANVAS_WIDTH;

var ctx = canvas.getContext("2d");
//获取当前时间的秒数
curShowTimeSec = getCurShowTimeSec();

//动态的改变当前时间,每50毫秒执行一次
setInterval(function(){
render(ctx);	//绘图
update();	//更新状态
},50);

}

function update(){
//获取下一次执行的时间,先让下一次执行的时间等于当前的时间
var nextShowTimeSeconds = getCurShowTimeSec();
var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600)/60);
var nextSeconds = nextShowTimeSeconds % 60;

//获取当前的时间,这个其实是上一次执行的一个时间,因为curShowTimeSec这个变量,只有在执行的时候才会改
//如果这一次不执行,这个时间一直是上一次执行的时间
var curHours = parseInt(curShowTimeSec / 3600);
var curMinutes = parseInt((curShowTimeSec - curHours * 3600)/60);
var curSeconds = curShowTimeSec % 60 ;
//如果下一次执行的秒数,跟上一次执行的秒数不一样.就改变当前的秒数
//因为他是50毫秒执行一次,所以肯定有两次秒数一样的情况
if(nextSeconds != curSeconds ){
//显示时间的小时的十位数改变了,要生成小时位置上的小球
if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));
}
//小时个位数
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
}

//分钟十位数的改变
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
}

//分钟个位数的改变
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
}

//秒钟十位数的改变
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
}

//秒钟的个位数改变
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
}

curShowTimeSec = nextShowTimeSeconds;

}
updateBalls();//更新生成的小球的状态
}

function updateBalls(){
//遍历所有的小球,改变小球的状态
for(var i = 0 ; i < balls.length ; i++){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
//碰撞的检测
if( balls[i].y >= CANVAS_HEIGHT- RADIUS){
balls[i].y = CANVAS_HEIGHT- RADIUS;
balls[i].vy = -balls[i].vy*0.75;
}
}
}

function addBalls(x , y , num){
for(var i = 0 ; i < digit[num].length ; i++){
for(var j = 0 ; j < digit[num][i].length ; j++){
//如果为1,则绘制小球
if(digit[num][i][j] == 1){
//设置需要绘制的小球的属性,包括坐标位置,半径,重力加速度的值
//X方向速度值,Y方向速度值
var aBall = {
x:x+j*2*(RADIUS+1)+(RADIUS+1),
y:y+i*2*(RADIUS+1)+(RADIUS+1),
r:RADIUS,
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//取负一或者正一
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aBall);//将创建的小球放入小球数组中
}
}
}
}

function getCurShowTimeSec(){
var currTime = new Date();
var ret = endTime.getTime() - currTime.getTime();
ret = Math.round(ret/1000);

return ret >= 0 ? ret : 0;
}

function render(ctx){
//刷新指定的一个矩形区域
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);// 刷新canvas画布,不然两次绘图的结果会重叠
//获取页面上要显示的倒计时的时分秒
var hours = parseInt(curShowTimeSec / 3600);
var minutes = parseInt((curShowTimeSec - hours * 3600)/60);
var seconds = curShowTimeSec % 60;
//开始绘制页面上显示的时分秒
renderDigit(MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10),ctx);
renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP,parseInt(hours%10), ctx);
renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP,parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP,parseInt(minutes%10),ctx);
renderDigit(MARGIN_LEFT + 69*(RADIUS+1), MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP,parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP,parseInt(seconds%10),ctx);

//绘制生成的小球
for(var i = 0 ; i < balls.length ; i++){
ctx.fillStyle = balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}

function renderDigit(x , y , num , ctx){
ctx.fillStyle = "rgb(0,102,153)";	//设置填充的颜色
/**
* 根据传入的num来绘制具体的数字,这个是保存在digit里面的,所有要绘制的地方,都用1标识了
* 不需要绘制的,使用0标识.digit是一个3维数组. 第一维的数组用于保存要绘制的每一个数组,从0到9
* 10表示的是:号的绘制. 第二维和第三维数组,就是具体的数字了.其中用1标识的是需要绘制的.0的不需要绘制
*/
for(var i = 0 ; i < digit[num].length ; i++){
for( var j = 0 ; j < digit[num][i].length ; j++){
if(digit[num][i][j] == 1){
ctx.beginPath();
//开始绘制一个圆,第一个参数是圆的x坐标点位置,第二个是y坐标点位置,第三个是半径
//第四个是从哪里开始绘制,0表示是0度的方向绘制.第五个参数是表示绘制到哪里
//0.5PI是-270度位置,1PI是180度位置,1.5PI是90度位置,2PI是360度位置
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}
}
}