<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

/*第一部分 - 创建画布*/

// 通过canvas元素创建一个canvas对象(var canvas):

let canvas = document.getElementById("canvas");

//为canvas对象创建一个2D绘图对象(var context)：    

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

//使用画布的高度计算时钟半径：    

let radius = canvas.height / 2;

//将（0,0）位置（绘图对象）重新映射到画布的中心：    

context.translate(radius, radius);

//减少时钟半径（至90％）以在画布内绘制时钟：    

radius = radius * 0.90;

//每隔一秒(1000毫秒)调用一次drawClock()函数    

setInterval(drawClock, 1000);

​

//创建一个绘制时钟的函数：    

function drawClock() {

    /* 

    //画一个圆形         

    context.arc(0, 0, radius, 0, 2 * Math.PI);

    context.fillStyle = "white";

    context.fill();*/

    drawFace(context, radius);

    drawNumbers(context, radius);

    drawLine(context, radius);

    drawTime(context, radius);

}

​

/*** 

第二部分 - 画一个钟面     

* @param context -2D绘图对象     

* @param radius -时钟半径     

*/    

function drawFace(context, radius) {

    let gradient;

    //起始一条路径，或重置当前路径

    context.beginPath();

    //画出白色圆圈：        

    context.arc(0, 0, radius, 0, 2 * Math.PI);

    //设置或返回用于填充绘画的颜色、渐变或模式        

    context.fillStyle = "#f2ffe5";

    //填充当前绘图（路径）       

    context.fill();

    //创建径向渐变（原始时钟半径的95％和105％）：        

    gradient = context.createRadialGradient( 0, 0, radius * 0.95, 0, 0, radius * 1.05  );

    //创建3个颜色停止点，对应于弧的内边，中边和外边：

    //颜色停止会产生3D效果        

    gradient.addColorStop(0, '#333');

    gradient.addColorStop(0.5, 'white');

    gradient.addColorStop(1, '#333');

    //将渐变定义为绘图对象的笔触样式：        

    context.strokeStyle = gradient;

    //定义图纸对象的线宽（半径的10％）：        

    context.lineWidth = radius * 0.1;

    //画圆圈：        

    context.stroke();

    //画时钟中心：        

    context.beginPath();

    //创建弧/曲线（用于创建圆形或部分圆）        

    context.arc(0, 0, radius * 0.06, 0, 2 * Math.PI);

    context.fillStyle = '#333';

    context.fill();

}

​

/**

* 第三部分 - 绘制时钟数     

* @param context -2D绘图对象     

* * @param radius -时钟半径     

*/    

function drawNumbers(context, radius) {

    let angle;

    let num;

    //将（绘图对象的）字体大小设置为半径的15％：        

    context.font = radius * 0.15 + "px arial";

    //设置或返回在绘制文本时使用的当前文本基线        

    context.textBaseline = "middle";

    //设置或返回文本内容的当前对齐方式。        

    context.textAlign = "center";

    //计算打印位置（12个数字）到半径的85％，每个数字旋转（PI / 6）：        

    for (num = 1; num <= 12; num++) {

        angle = num * Math.PI / 6;

        context.rotate(angle);

        //重新映射画布上的 (0,0) 位置           

        context.translate(0, -radius * 0.85);

        context.rotate(-angle);

        //在画布上绘制"被填充的"文本            

        context.fillText(num.toString(), 0, 0);

        context.rotate(angle);

        context.translate(0, radius * 0.85);

        context.rotate(-angle);

    }

}

​

/**     

* 第四部分 -画时钟表格线     

* @param context -2D绘图对象     

* @param radius -时钟半径     

*/    

function drawLine(context, radius) {

    let i;

    for (i = 1; i <= 60; i++) {

        if (i % 5 == 0) {

            context.strokeStyle = "red";

        } else {

            context.strokeStyle = "black";

        }

        context.beginPath();

        context.lineWidth = radius * 0.02;

        context.rotate(i * Math.PI / 30);

        context.moveTo(0, -radius * 1.05);

        context.lineTo(0, -radius * 0.95);

        context.stroke();

        context.rotate(-i * Math.PI / 30);

    }

}

​

/**     

* 第五部分 - 画时钟指针     

* @param context -2D绘图对象     

* @param radius -时钟半径     

*/    

function drawTime(context, radius) {

    //使用日期获取小时，分钟，秒：        

    let date = new Date();

    let hours = date.getHours();

    let minutes = date.getMinutes();

    let seconds = date.getSeconds();

    //绘制时针        

    hours = hours % 12;

    // 计算时针的角度        

    hours = (hours * Math.PI / 6) +

        (minutes * Math.PI / (6 * 60)) +

        (seconds * Math.PI / (6 * 60 * 60));

    //绘制一个长度（半径的50％）和宽度（半径的5％）的时针：        

    drawHand(context, hours, radius * 0.4, radius * 0.05, "green");

    //绘制分针        

    minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));

    drawHand(context, minutes, radius * 0.7, radius * 0.04, "blue");

    // 绘制秒针        

    seconds = (seconds * Math.PI / 30);

    drawHand(context, seconds, radius * 0.8, radius * 0.02, "red");

​

}

​

/**     

* 绘制一条给定长度和宽度,并指定颜色的线,用来画各种表针     

* @param context -2D绘图对象     

* @param pos -旋转角度     

* @param length -长度     

* @param width -宽度     

*/    

function drawHand(context, pos, length, width, color) {

    //起始一条路径，或重置当前路径        

    context.beginPath();

    //设置或返回当前的线条宽度        

    context.lineWidth = width;

    //设置或返回线条的结束端点样式        

    //round    向线条的每个末端添加圆形线帽        

    context.lineCap = "round";

    //把路径移动到画布中的指定点，不创建线条        

    context.moveTo(0, 0);

    //旋转当前绘图        

    context.rotate(pos);

    //添加一个新点，然后在画布中创建从该点到最后指定点的线条        

    context.lineTo(0, -length);

    context.strokeStyle = color;

    //绘制已定义的路径        

    context.stroke();

    context.rotate(-pos);

}