<! DOCTYPEhtml>
<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;">Your browser does not support the HTML5 canvas tag.</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); // Draw the dial
                    myAction.drawAllHands(ctx); // Draw time second hand
                    requestAnimationFrame(step);
                });
            },
            /* Draw time second hand */
            drawAllHands: function(ctx) {
                var time = new Date(a);var s = time.getSeconds();
                var m = time.getMinutes();
                var h = time.getHours();

                var pi = Math.PI;
                var secondAngle = pi / 180 * 6 * s; // Calculate the radian of s needle
                var minuteAngle = pi / 180 * 6 * m + secondAngle / 60; // Calculate the radian of the minute hand
                var hourAngle = pi / 180 * 30 * h + minuteAngle / 12; // Calculate the radian of the hour hand

                myAction.drawHand(hourAngle, 60.6."red", ctx); // Draw an hour hand
                myAction.drawHand(minuteAngle, 106.4."green", ctx); // Draw the minute hand
                myAction.drawHand(secondAngle, 129.2."blue", ctx); // Draw the second hand
            },
            /* Draw an hour, or minute, or second hand * Parameter 1: Angle of the needle to draw * Parameter 2: length of the needle to draw * Parameter 3: width of the needle to draw * Parameter 4: color of the needle to draw * Parameter 4: CTX * */
            drawHand: function(angle, len, width, color, ctx) {
                ctx.save();
                ctx.translate(150.150); // Move the far point of the coordinate axis to the original center
                ctx.rotate(-Math.PI / 2 + angle); // Rotate the axes. The X-axis is the Angle of the needle
                ctx.beginPath();
                ctx.moveTo(-4.0);
                ctx.lineTo(len, 0); // Draw the needle along the X-axis
                ctx.lineWidth = width;
                ctx.strokeStyle = color;
                ctx.lineCap = "round";
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            },
            /* Draw the dial */
            drawDial: function() {
                var pi = Math.PI;

                ctx.clearRect(0.0.300.300); // Clear everything
                ctx.save();

                ctx.translate(150.150); // set the origin to the original center
                ctx.beginPath();
                ctx.arc(0.0.148.0.2 * pi); // Draw a circle
                ctx.stroke();
                ctx.closePath();

                for (var i = 0; i < 60; i++) { // Draw the scale.
                    ctx.save();
                    ctx.rotate(-pi / 2 + i * pi / 30); // Rotate the axes. The square of axis X starts at the top
                    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>
Copy the code