我的也是时钟可以显示，但是小球无法生成，感觉addball函数，无法运行，麻烦大家看一下 谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时时钟</title>
<script src="digit.js"></script>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 50px auto;"></canvas>
<script>
//设置宽高
var window_width = 1024;
var window_height = 600;
var radius = 8;
var margintop = 60;
var marginleft = 30;
const endtime = new Date(2018, 6, 22, 18, 47, 52);
var minseconds = 0;
var balls = [];
const colors = ["red", "green", "blue", "yellow", "black", "gray", "#376956", "#5ED5d1", "#FF6e97", "#f1aaa6"]
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
canvas.width = window_width;
canvas.height = window_height;
minseconds = getCurrentShowTimeSeconds();
setInterval(function () {
render(context);
update();
}, 50);
};
function getCurrentShowTimeSeconds() {
var curtime = new Date();
var ret = endtime.getTime() - curtime.getTime();
ret = Math.round(ret / 1000);
return ret >= 0 ? ret : 0;
}
function update() {
var nextseconds = getCurrentShowTimeSeconds();
var nexthours = parseInt(nextseconds / 3600);
var nextminutes = parseInt((nextseconds - nexthours * 3600) / 60);
var nextsecond = nextseconds % 60;
var curhours = parseInt(minseconds / 3600);
var curminutes = parseInt((minseconds - curhours * 3600) / 60);
var curseconds = minseconds % 60;
if (nextseconds != curseconds) {
if (parseInt(curhours / 10) != parseInt(nexthours/10)) {
addballs(marginleft+0, margintop, parseInt(curhours / 10))
}
if (parseInt(curhours % 10) != parseInt(nexthours%10)) {
addballs(marginleft+(15*radius+1), margintop, parseInt(curhours % 10))
}
if (parseInt(curminutes/10) != parseInt(nextminutes/10)) {
addballs(marginleft + (39 * radius+1), margintop, parseInt(curminutes / 10))
}
if (parseInt(curminutes % 10) != parseInt(nextminutes % 10)) {
addballs(marginleft + (54 * radius+1), margintop, parseInt(curminutes % 10))
}
if (parseInt(curseconds / 10) != parseInt(nextsecond / 10)) {
addballs(marginleft + (78 * radius+1), margintop, parseInt(curseconds / 10))
}
if (parseInt(curseconds%10) != parseInt(nextsecond % 10)) {
addballs(marginleft + (93 * radius+1), margintop, parseInt(curseconds % 10))
}
minseconds = nextseconds;
}
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 >= window_height - radius) {
balls[i].y = window_height - radius;
balls[i].vy = -balls[i].vy * 0.75;
}
}
}
function addballs(x, y, num) {
for (var i = 0; i < digit[num].lenght; i++) {
for (var j = 0; j < digit[num][i].length; j++) {
if (digit[num][i][j] == 1) {
var aball = {
x: x + j * 2 * (radius + 1) + (radius + 1),
y: y + i * 2 * (radius + 1) + (radius + 1),
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);
alert("aa");
}
}
}
}
function render(cxt) {
cxt.clearRect(0, 0, window_width, window_height);
//设置时间变量
var hours = parseInt(minseconds / 3600);
var minutes = parseInt((minseconds - hours * 3600) / 60);
var seconds = parseInt(minseconds % 60);
renderdigit(marginleft, margintop, parseInt(hours / 10), cxt)
renderdigit(marginleft + 15 * (radius + 1), margintop, parseInt(hours % 10), cxt);
renderdigit(marginleft + 30 * (radius + 1), margintop, 10, cxt);
renderdigit(marginleft + 39 * (radius + 1), margintop, parseInt(minutes / 10), cxt)
renderdigit(marginleft + 54 * (radius + 1), margintop, parseInt(minutes % 10), cxt);
renderdigit(marginleft + 69 * (radius + 1), margintop, 10, cxt);
renderdigit(marginleft + 78 * (radius + 1), margintop, parseInt(seconds / 10), cxt)
renderdigit(marginleft + 93 * (radius + 1), margintop, parseInt(seconds % 10), cxt);
for (var i = 0; i < balls.lenght; i++) {
ctx.fillStyle = balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x, balls[i].y, ball.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.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) {
cxt.beginPath();
cxt.arc(x + j * 2 * (radius + 1) + (radius + 1), y + i * 2 * (radius + 1) + (radius + 1), radius, 0, Math.PI * 2);
cxt.closePath();
cxt.fill();
}
}
}
}
</script>
</body>
</html>
前面上下文变量错了，后面半径直接用