canvas时钟代码

function drawPanel() {
            // ======
            ctx.translate(150, 150);
            ctx.beginPath();
            ctx.arc(0, 0, 130, 0, 2 * Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
        }

        function hourNum() {
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            ctx.beginPath();
            ctx.font = "30px fangsong";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = "black";
            for (var i = 0; i < arr.length; i++) {
                ctx.fillText(
                    arr[i],
                    108 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
                    108 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
                );
            }
        }

        function centerDot() {
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle = "gray";
            ctx.arc(0, 0, 5, 0, 2 * Math.PI);
            ctx.fill();
        }

        function hourHand(hours, minutes) {
            var radius =
                ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.lineCap = "round";
            ctx.strokeStyle = "black";
            ctx.rotate(radius);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -50);
            ctx.stroke();
            ctx.restore();
        }

        function minuteHand(minutes) {
            2 * Math.PI;
            var radius = ((2 * Math.PI) / 60) * minutes;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            ctx.strokeStyle = "black";
            ctx.rotate(radius);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -70);

            ctx.stroke();
            ctx.restore();
        }
        function secondHand(seconds) {
            var radius = ((2 * Math.PI) / 60) * seconds;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.lineCap = "round";
            ctx.strokeStyle = "red";
            ctx.rotate(radius);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -90);
            ctx.stroke();
            ctx.restore();
        }