为什么我没有出现彩色的小球呢？
var CANVAS_WIDTH = 1024;
var CANVAS_HEIGHT = 768;
var RADIUS = 5;
var MARGIN_TOP = 280;
var MARGIN_LEFT = 30;
var DEV = 10;//:是digit[10]
const endTime = new Date(2015,10,23,00,00,00);
var secondsCurToEnd = 0;
var balls = [];
const colors = ["#3385E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
window.onload = function() {
canvas = document.getElementById("canvas");
if(canvas.getContext("2d")) {
context = canvas.getContext("2d");
} else {
alert("当前浏览器不支持canvas，请更换浏览器后再试");
}
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
secondsCurToEnd = getSecondsCurToEnd();
setInterval(
function() {
render(context);
update();
},
50
);
}
function getSecondsCurToEnd() {
var curTime = new Date();
var rtn = endTime.getTime()-curTime.getTime();
rtn = Math.round(rtn/1000);
return rtn>=0 ? rtn : 0;
}
function update() {
var secondsNextToEnd = getSecondsCurToEnd();
var nextHours = Math.floor(secondsNextToEnd/3600);
var nextMinutes = Math.floor((secondsNextToEnd-nextHours*3600)/60);
var nextSeconds = Math.floor(secondsNextToEnd%60);
var nextHours_b = Math.floor(nextHours/100);
var nextHours_s = Math.floor(nextHours%100/10);
var nextHours_g = Math.floor(nextHours%10);
var nextMinutes_s = Math.floor(nextMinutes/10);
var nextMinutes_g = Math.floor(nextMinutes%10);
var nextSeconds_s = Math.floor(nextSeconds/10);
var nextSeconds_g = Math.floor(nextSeconds%10);
var curHours = Math.floor(secondsCurToEnd/3600);
var curMinutes = Math.floor((secondsCurToEnd-curHours*3600)/60);
var curSeconds = Math.floor(secondsCurToEnd%60);
var curHours_b = Math.floor(curHours/100);
var curHours_s = Math.floor(curHours%100/10);
var curHours_g = Math.floor(curHours%10);
var curMinutes_s = Math.floor(curMinutes/10);
var curMinutes_g = Math.floor(curMinutes%10);
var curSeconds_s = Math.floor(curSeconds/10);
var curSeconds_g = Math.floor(curSeconds%10);
if(nextSeconds != curSeconds) {
if(curHours_b != nextHours_b) {
addBalls(00*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);
}
if(curHours_s != nextHours_s) {
addBalls(15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_s);
}
if(curHours_g != nextHours_g) {
addBalls(30*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_g);
}
if(curMinutes_s != nextMinutes_s) {
addBalls(54*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);
}
if(curMinutes_g != nextMinutes_g) {
addBalls(69*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);
}
if(curSeconds_s != nextSeconds_s) {
addBalls(93*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);
}
if(curSeconds_g != nextSeconds_g) {
addBalls(108*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);
}
secondsCurToEnd = secondsNextToEnd;
}
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++) {
if(digit[num][i][j] == 1) {
var aball = {
centerX:x+j*2*(RADIUS+1),
centerY:y+i*2*(RADIUS+1),
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//+/-4
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aball);
}
}
}
}
function render(cxt) {
cxt.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
// var hours = parseInt(secondsCurToEnd/3600);
// var minutes = parseInt((secondsCurToEnd-hours*3600)/60);
// var seconds = parseInt(secondsCurToEnd%60);
// var hours_b = parseInt(hours/100);
// var hours_s = parseInt(hours%100/10);
// var hours_g = parseInt(hours%10);
// var minutes_s = parseInt(minutes/10);
// var minutes_g = parseInt(minutes%10);
// var seconds_s = parseInt(seconds/10);
// var seconds_g = parseInt(seconds%10);
var hours = Math.floor(secondsCurToEnd/3600);
var minutes = Math.floor((secondsCurToEnd-hours*3600)/60);
var seconds = Math.floor(secondsCurToEnd%60);
var hours_b = Math.floor(hours/100);
var hours_s = Math.floor(hours%100/10);
var hours_g = Math.floor(hours%10);
var minutes_s = Math.floor(minutes/10);
var minutes_g = Math.floor(minutes%10);
var seconds_s = Math.floor(seconds/10);
var seconds_g = Math.floor(seconds%10);
// var time = [hours_s,hours_g,DEV,minutes_s,minutes_g,DEV,seconds_s,seconds_g];
// for (var i=0;i<time.length;i++) {
// renderDigit(i*15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,time[i],cxt);
// }
renderDigit(00*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_b,cxt);
renderDigit(15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_s,cxt);
renderDigit(30*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_g,cxt);
renderDigit(45*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,DEV,cxt);
renderDigit(54*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,minutes_s,cxt);
renderDigit(69*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,minutes_g,cxt);
renderDigit(84*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,DEV,cxt);
renderDigit(93*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,seconds_s,cxt);
renderDigit(108*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,seconds_g,cxt);
for(var i=0;i<balls.length;i++) {
cxt.fillStyle = balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
function renderDigit(x,y,num,cxt) {
cxt.fillStyle = "rgb(0,102,153)";
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) {
centerX = x+j*2*(RADIUS+1)+(RADIUS+1);
centerY = y+i*2*(RADIUS+1)+(RADIUS+1);
cxt.beginPath();
cxt.arc(centerX,centerY,RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
