HTML5 - 另一个时钟 - 编程论坛

<!DOCTYPE html>

<html lang="en" xmlns="http://www.
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas width="500" height="500" id="clock"></canvas>
    <script>
        function drawClock() {
            var cxt = document.getElementById('clock').getContext('2d'),
                i = 0,
                now = new Date(),
                sec = now.getSeconds(),
                min = now.getMinutes(),
                hour = (now.getHours() % 12) + min / 60;

            cxt.clearRect(0, 0, 500, 500);

            cxt.lineWidth = 10;
            cxt.strokeStyle = 'rgba(0,0,255,0.6)';
            cxt.beginPath()
            cxt.strokeRect(50, 50, 400, 400);
            //cxt.arc(250, 250, 200, 0, 360, false);
            cxt.closePath();
            cxt.stroke();

            //绘制表盘
            cxt.strokeStyle = 'rgba(0,0,0,0.6)';
            for (i = 1; i <= 60; i++) {
                cxt.save();
                if (i % 5 == 0) {
                    cxt.lineWidth = 7;
                }
                else {
                    cxt.lineWidth = 4;
                }
                cxt.translate(250, 250);
                cxt.rotate(i * Math.PI / 30);

                cxt.beginPath();
                if (i % 5 == 0) {
                    cxt.moveTo(0, -170);
                    cxt.font = '18px 黑体';
                    cxt.lineWidth = 1;
                    cxt.strokeText((i / 5), -6, -150);
                    cxt.lineWidth = 7;
                }
                else {
                    cxt.moveTo(0, -180);
                }
                cxt.lineTo(0, -190);
                cxt.closePath();

                cxt.stroke();

                cxt.restore();
            }
            //绘制时针
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle = 'rgb(0,0,0)';
            cxt.translate(250, 250);
            cxt.rotate(hour * Math.PI / 6);
            cxt.beginPath();
            cxt.moveTo(0, -110);
            cxt.lineTo(0, 10);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //绘制分针
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = 'rgb(0,0,0)';
            cxt.translate(250, 250);
            cxt.rotate(min * Math.PI / 30);
            cxt.beginPath();
            cxt.moveTo(0, -130);
            cxt.lineTo(0, 15);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //绘制秒针
            cxt.save();
            cxt.lineWidth = 2;
            cxt.strokeStyle = 'rgb(255,0,0)';
            cxt.translate(250, 250);
            cxt.rotate(sec * Math.PI / 30);
            cxt.beginPath();
            cxt.moveTo(0, -150);
            cxt.lineTo(0, 20);
            cxt.closePath();
            cxt.stroke();
            //绘制时针、分针、秒针的交叉点
            cxt.beginPath();
            cxt.arc(0, 0, 6, 0, 360, false);
            cxt.closePath();
            cxt.fillStyle = 'rgba(150,150,150,1)';
            cxt.fill();
            cxt.stroke();
            //设置秒针的尖端的小原点
            cxt.beginPath();
            cxt.arc(0, -130, 5, 0, 360, false);
            cxt.closePath();
            cxt.fillStyle = 'rgba(150,150,50,1)';
            cxt.fill();
            cxt.stroke();
            cxt.restore();
        }

        drawClock();
        setTimeout(function () {
            drawClock()
            setTimeout(arguments.callee, 1000);
        }, 1000);
    </script>
</body>
</html>