canvas.heihgt=WINDOW_HEIGHT;      前面的height写错了 改成canvas.height=WINDOW_HEIGHT; 

j代表点阵X方向第几格，x代表这个数字的起始位置，计算到每个点阵就是x + j*2*(R+1)，到点阵中的圆心就要加多个点阵半径

函数名写错了。

拼写有没有问题，函数传参的时候注意名称。

很多语句未加" ; "符号

花括号圆括号写错

renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);多写

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

window.onload = function () {

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;

    canvas.height = WINDOW_HEIGHT;

    render(context);

}

function render(cxt) {

    var hours = 12;

    var minutes = 34;

    var seconds = 56;

    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);

    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);

    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);

    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);

    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);

    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);

    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);

    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

}

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, 2 * Math.PI);

                cxt.closePath();

                cxt.fill();

            }

        }

}

看了两三遍才看懂这个式子是怎么推导出来的。。。。

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){

首先num是想要渲染的、时钟的数字

那么digit[num]就是3维数组那个数字对应的数组，digit[num].length就是对应数字的2维数组长度（即图案高度10）

digit[num][i].length为宽度(数字7 冒号4)

digit[num][i][j]为图案的0或1

第1行：遍历10行

第2行：遍历7或4列

第3行：判断是不是1，如果是1才继续下面的渲染

cxt.arc(x + j * 2*(RADIUS + 1) + (RADIUS + 1), y + i * 2*(RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);

你把y + i * 2*(RADIUS + 1) 里面的i写成j是错的，纠正一下，把这里的j改成i

没有定义renderDigit 

可以检查一下语法，逻辑，输入是否有误，具体可参阅有关资料，别着急，加油。

请升级你的浏览器，或者重新下载你的火狐浏览器

加上填充色

<script scr="你文件的相对路径"></script>

这个x，y,num是addBalls函数所接收的参数，如果你设置这个参数为别的你也可以不用x,y,num用别的变量名。

那个7是digit.js里数字对应的列数

不是大神。。复制到本地f12马上就知道错误了。。第7行 document.getElementsById('canvas'); 应该是 document.getElementById('canvas');

学会调试~~

半径的单位是像素，canvas宽度时200px，里面的圆的半径是100px，因为有10px的border，会有部分border显示时被遮挡，所以半径设为了r-5，即95px

要这么改：

const endTime = new Date(2017,9,3,0,0);
var curShowTimeSeconds = 0;//存储自1970年0时0分0秒到现在的毫米数，初始化为0；
var windowWidth = 1500;
var windowHieght = 800;
var R = 8;
var marginTop = 60;
var marginLeft = 30;


var balls = new Array(0);
const colors = ["#33E5B5","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#CC000C"];


// var c = document.getElementById("clock");
// var context = c.getContext('2d');
window.onload = function () {
    var canvas = document.getElementById("clock");
    var ctx = canvas.getContext('2d');
    canvas.width = windowWidth;
    canvas.height = windowHieght;
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    setInterval(function () {
        render(ctx);
        upDate();
    },50);
};

function upDate() {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    //var curShowTimeSeconds = getCurrentShowTimeSeconds();

    var nexthours = parseInt(nextShowTimeSeconds / 3600);
    var nextminutes = parseInt((nextShowTimeSeconds - nexthours *3600)/60);
    var nextseconds = nextShowTimeSeconds % 60;

    var curhours = parseInt(curShowTimeSeconds / 3600);
    var curminutes = parseInt((curShowTimeSeconds - curhours *3600)/60);
    var curseconds = curShowTimeSeconds % 60;

    if (nextseconds != curseconds){

        if (parseInt(curhours/10) != parseInt(nexthours/10)){
            addBalls(marginLeft,marginTop,parseInt(curhours/10));
        }
        if (parseInt(curhours%10) != parseInt(nexthours%10)){
            addBalls(marginLeft+15*(R+1),marginTop,curhours%10);
        }//hours

        if (parseInt(curminutes/10) != parseInt(nextminutes/10)){
            addBalls(marginLeft +39*(R+1),marginTop,parseInt(curminutes/10));
        }
        if (parseInt(curminutes%10) != parseInt(nextminutes%10)){
            addBalls(marginLeft+54*(R+1),marginTop,curminutes%10);
        }//minutes

        if (parseInt(curseconds/10) != parseInt(nextseconds/10)){
            addBalls(marginLeft+78*(R+1),marginTop,parseInt(curseconds/10));
        }
        if (parseInt(curseconds%10) != parseInt(nextseconds%10)){
            addBalls(marginLeft+93*(R+1),marginTop,curseconds%10);
        }//seconds



        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateBalls();
}

function render(cxt) {
    cxt.beginPath;
    cxt.clearRect(0,0,windowWidth,windowHieght);
    cxt.font = "40px 宋体";
    cxt.fillText("距离10.3 0：00还有：",30,40);

    var hours = parseInt(curShowTimeSeconds / 3600);//总秒数除以3600秒，强制类型转换
    var minutes = parseInt((curShowTimeSeconds - hours *3600)/60);//总时间减去小时的秒数，除以60秒，强制类型转换
    var seconds = curShowTimeSeconds % 60;//总时间除以60为分钟数，其的余数为秒数

    //console.log("ds");
    renderDigit(marginLeft,marginTop,parseInt(hours/10),cxt);
    renderDigit(15*(R+1)+marginLeft,marginTop,parseInt(hours%10),cxt);
    renderDigit(30*(R+1)+marginLeft,marginTop,10,cxt);
    //hours
    renderDigit(39*(R+1)+marginLeft,marginTop,parseInt(minutes/10),cxt);
    renderDigit(54*(R+1)+marginLeft,marginTop,parseInt(minutes%10),cxt);
    renderDigit(69*(R+1)+marginLeft,marginTop,10,cxt);
    //minutes
    renderDigit(78*(R+1)+marginLeft,marginTop,parseInt(seconds/10),cxt);
    renderDigit(93*(R+1)+marginLeft,marginTop,parseInt(seconds%10),cxt);
    //seconds


    for (var i =0;i<balls.length;i++){
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI,false);
        cxt.closePath();
        cxt.fill();
    }
}

function renderDigit(x,y,num,ctx) {
    ctx.fillStyle = "rgb(0,102,153)";
    //console.log(digit[num].length);
    for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
        //console.log(digit[num][i]);
        for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
            if (digit[num][i][j] === 1){
                ctx.beginPath();
                ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
                // 圆的margin为2，每个圆在一个格子中，圆的半径为R
                // 格子边长为2*(R+1);i为y坐标，j为x坐标；第(i,j)个圆的圆心位置：(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1))
                ctx.closePath();
                ctx.fill();
            }
        }
    }
}
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round(ret/1000);
    return ret >=0 ? ret:0;
}
function addBalls(x,y,num) {
    //console.log(num);
    for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
        //console.log(digit[num][i].length);
        for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
            if (digit[num][i][j] === 1){
                //var airResistance = 0.7;
                var aBall = {
                    x:x+j*2*(R+1)+(R+1),
                    y:y+i*2*(R+1)+(R+1),
                    a:2 + Math.random()*10,
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*30,
                    vy:-Math.floor(Math.random()*30),
                    color:colors[Math.floor(Math.random()*colors.length)]
                };
                balls.push(aBall);
            }
        }
    }
}

function updateBalls() {
    for (var i =0 ;i<balls.length;i++){
        balls[i].x+=balls[i].vx;
        balls[i].y+=balls[i].vy;
        balls[i].y+=balls[i].a;

        if (balls[i].y >= windowHieght - R) {
            balls[i].y = windowHieght - R;
            balls[i].vy = -balls[i].vy*0.8;
        }
        if (balls[i].y <= R){
            balls[i].y = R;
            balls[i].vy = -balls[i].vy*0.8;
        }
        // if (balls[i].x >= windowWidth - R){
        //     balls[i].x = windowWidth - R;
        //     balls[i].vx = -balls[i].vx*0.8;
        // }
        // if (balls[i].x <= R){
        //     balls[i].x = R;
        //     balls[i].vx = -balls[i].vx*0.8;
        // }
    }
}

第一个错误：少了一个*

renderDigit(MARGIN_LEFT+15(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);

renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);

第二个错误：少了一个大括号

for(var j=0;j<digit[num][i].length;j++)

for(var j=0;j<digit[num][i].length;j++){

请问这是错在哪里里

给我看一下源代码？可能是for循环出问题了吧。 要从1开始循环。 

修改半径大小即可

因为这是圆心的位置，不加上这个（R+1）这个横坐标就是最后一个一个正方形的最左边，加上这个R+1就是这个正方形的中心位置的横坐标了。不知道我说明白了没，没明白的话我就不知道再怎么解释了

style 不是sytle  ，认真点

不是canvas的宽度为屏幕的4/5，是时钟数字的总宽度为屏幕的4/5

你这貌似是}都写乱了

 1在digit.js中每个组成数字的二维点阵里，表示实心圆，就是遇到1才绘制圆

粗心粗心  解决了