<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        body{background-color: rgba(0, 0, 0, 0.1)}
    </style>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx, earchSpeed = 60,
            moonSpeed = 6;

        var dom = {
            earchSpeed: $('#m-earth-speed'),
            moonSpeed: $('#m-moon-speed'),
            btn: $('#m-btn'),
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                myAction.draw(ctx);
            },
            draw: function(ctx) {
                requestAnimationFrame(function step() {
                    myAction.drawDial(ctx); //绘制表盘
                    myAction.drawAllHands(ctx); //绘制时分秒针
                    requestAnimationFrame(step);
                });
            },
            /*绘制时分秒针*/
            drawAllHands: function(ctx) {
                var time = new Date();

                var s = time.getSeconds();
                var m = time.getMinutes();
                var h = time.getHours();

                var pi = Math.PI;
                var secondAngle = pi / 180 * 6 * s; //计算出来s针的弧度
                var minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //计算出来分针的弧度
                var hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //计算出来时针的弧度

                myAction.drawHand(hourAngle, 60, 6, "red", ctx); //绘制时针
                myAction.drawHand(minuteAngle, 106, 4, "green", ctx); //绘制分针
                myAction.drawHand(secondAngle, 129, 2, "blue", ctx); //绘制秒针
            },
            /*绘制时针、或分针、或秒针
             * 参数1：要绘制的针的角度
             * 参数2：要绘制的针的长度
             * 参数3：要绘制的针的宽度
             * 参数4：要绘制的针的颜色
             * 参数4：ctx
             * */
            drawHand: function(angle, len, width, color, ctx) {
                ctx.save();
                ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
                ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
                ctx.beginPath();
                ctx.moveTo(-4, 0);
                ctx.lineTo(len, 0); // 沿着x轴绘制针
                ctx.lineWidth = width;
                ctx.strokeStyle = color;
                ctx.lineCap = "round";
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            },
            /*绘制表盘*/
            drawDial: function() {
                var pi = Math.PI;

                ctx.clearRect(0, 0, 300, 300); //清除所有内容
                ctx.save();

                ctx.translate(150, 150); //一定坐标原点到原来的中心
                ctx.beginPath();
                ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
                ctx.stroke();
                ctx.closePath();

                for (var i = 0; i < 60; i++) { //绘制刻度。
                    ctx.save();
                    ctx.rotate(-pi / 2 + i * pi / 30); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
                    ctx.beginPath();
                    ctx.moveTo(110, 0);
                    ctx.lineTo(140, 0);
                    ctx.lineWidth = i % 5 ? 2 : 4;
                    ctx.strokeStyle = i % 5 ? "blue" : "red";
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                }
                ctx.restore();
            }
        });
        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>