利用canvas绘制时钟

    window.onload = function () {
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');

         // 绘制圆盘
        function clock() {
            //绘制圆盘
            context.beginPath();
            context.arc(300, 300, 200, 0, Math.PI * 2);
            context.fillStyle = 'pink';
            context.fill();
            context.closePath();

            //绘制时刻度
            for (i = 0; i < 12; i++) {
                context.save();
                context.lineWidth = 4;
                context.beginPath();
                //将原点平移300,300
                context.translate(300, 300);
                context.rotate(i * (Math.PI / 6));
                context.moveTo(0, -180);
                context.lineTo(0, -200);
                context.stroke();
                context.fillStyle = 'black';
                context.rotate(Math.PI / 6);
                context.fillText(i + 1, -8, -220);
                context.closePath();
                context.restore();
            }

            //绘制分刻度
            for (i = 0; i < 60; i++) {
                context.save();
                context.lineWidth = 1;
                context.beginPath();
                //将原点平移300,300
                context.translate(300, 300);
                context.rotate(i * (Math.PI / 30));
                context.moveTo(0, -190);
                context.lineTo(0, -200);
                context.stroke();
                context.closePath();
                context.restore();
            }

            // 获取当前时间
            var today = new Date();
            var hour = today.getHours();
            var min = today.getMinutes();
            var sec = today.getSeconds();
            // 
            hour = hour + min / 60;

            // 绘制时针
            context.lineWidth = 3
            context.save();
            context.translate(300, 300);
            context.rotate(hour * Math.PI / 6);
            context.beginPath();
            context.moveTo(0, 10)
            context.lineTo(0, -80);
            context.stroke()
            context.closePath();
            context.restore();

            // 绘制分针
            context.lineWidth = 2;
            context.save();
            context.translate(300, 300);
            context.rotate(min * (Math.PI / 30));
            context.beginPath();
            context.moveTo(0, 10);
            context.lineTo(0, -100);
            context.stroke()
            context.closePath();
            context.restore();

            // 绘制秒针 
            context.lineWidth = 1;
            context.save();
            context.translate(300, 300);
            context.rotate(sec * Math.PI / 30);
            context.beginPath();
            context.moveTo(0, 10);
            context.lineTo(0, -120);
            context.strokeStyle = 'red';
            context.stroke()
            context.closePath();
            context.restore();

            // 绘制交叉处
            // context.lineWidth=1
            context.save();
            context.translate(300, 300);
            context.beginPath();
            context.arc(0, 0, 5, 0, Math.PI * 2);
            context.fill();
            context.fillStyle = '#ccc'
            context.strokeStyle = 'red'
            context.stroke()
            context.closePath();
            context.restore();
                setInterval(clock, 1000)//超时模拟间歇
        }            
        clock();

    }

效果图如下：