分形时钟运动轨迹效果-html代码-BFW代码库

分形时钟运动轨迹效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script>
        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback);
                }
            );
        });

        function init(elemid) {
            let canvas = document.getElementById(elemid),
            c = canvas.getContext("2d"),
            w = (canvas.width = window.innerWidth),
            h = (canvas.height = window.innerHeight);
            c.fillStyle = "rgba(30,30,30,1)";
            c.fillRect(0, 0, w, h);
            return {
                c: c,
                canvas: canvas
            };
        }
    </script>
    <style>
        body,
        html {
            margin: 0px;
            padding: 0px;
            position: fixed;
            background: rgb(30,30,30);
        }

        canvas {}
    </style>

</head>
<body translate="no">
    <canvas id="canvas"></canvas>

    <script>
        window.onload = function () {
            let c = init("canvas").c,
            canvas = init("canvas").canvas,
            w = canvas.width = window.innerWidth,
            h = canvas.height = window.innerHeight,
            mouse = {
                x: w / 2,
                y: h / 2
            },
            last_mouse = {};

            //initiation
            let date = new Date(),
            H = date.getHours() % 12,
            M = date.getMinutes(),
            s = date.getSeconds(),
            m = date.getMilliseconds() / 1000,
            htime = s + M * 60 + H * 60 * 60 + m,
            mtime = s + M * 60 + m,
            stime = s + m,
            mstime = m,
            hang = 2 * Math.PI / (12 * 60 * 60 / htime),
            mang = 2 * Math.PI / (60 * 60 / mtime),
            sang = 2 * Math.PI / (60 / stime),
            msang = 2 * Math.PI / (1 / mstime),
            tstring = "" + H + ":" + M + ":" + s,
            ch = 0,
            cM = 90,
            cs = 180,
            cms = 270,
            harr = [],
            sc = 10,
            maxit = 6,
            gr = 2 / (1 + Math.sqrt(5));

            function showdate(x, y, l, b, a, it, color, al) {

                c.globalAlpha = al;
                c.beginPath();
                c.arc(x + l * Math.cos(a), y + l * Math.sin(a), b, 0, 2 * Math.PI);
                c.fillStyle = color;
                c.fill();

                c.beginPath();
                c.lineTo(x, y);
                c.lineTo(x + l * Math.cos(a), y + l * Math.sin(a));
                c.strokeStyle = color;
                c.lineWidth = gr * b;
                c.stroke();
                c.lineCap = "round";
                c.globalAlpha = 1;
                if (it < maxit) {
                    showdate(x + l * Math.cos(a), y + l * Math.sin(a), gr * l, gr * b, a + hang, it + 1, "hsla(" + ch + ",100%,50%," + (1 - it * 1 / maxit) + ")", al);
                    showdate(x + l * Math.cos(a), y + l * Math.sin(a), gr * l, gr * b, a + mang, it + 1, "hsla(" + cM + ",100%,50%," + (1 - it * 1 / maxit) + ")", al);
                    showdate(x + l * Math.cos(a), y + l * Math.sin(a), gr * l, gr * b, a + sang, it + 1, "hsla(" + cs + ",100%,50%," + (1 - it * 1 / maxit) + ")", al);
                    //showdate(x+l*Math.cos(a),y+l*Math.sin(a),gr*l,gr*b,a+msang,it+1,"hsla("+cms+",100%,0%,"+(1-(it)*1/maxit)+")",gr*al);
                }
            }

            function updatedate() {
                date = new Date();
                H = date.getHours() % 12;
                M = date.getMinutes();
                s = date.getSeconds();
                m = date.getMilliseconds() / 1000;
                htime = s + M * 60 + H * 60 * 60 + m;
                mtime = s + M * 60 + m;
                stime = s + m;
                mstime = m;
                hang = 2 * Math.PI / (12 * 60 * 60 / htime);
                mang = 2 * Math.PI / (60 * 60 / mtime);
                sang = 2 * Math.PI / (60 / stime);
                msang = 2 * Math.PI / (1 / mstime);
                tstring = "" + H + ":" + M + ":" + s;
            }

            for (let i = 0; i < 60; i++) {
                harr.push(i * 2 * Math.PI / 60);
            }

            function draw() {
                //animation

                c.beginPath();
                c.lineTo(w / 2, h / 2);
                c.lineTo(w / 2 + h / 6 * Math.cos(hang - Math.PI / 2), h / 2 + h / 6 * Math.sin(hang - Math.PI / 2));
                c.strokeStyle = "hsl(" + ch + ",100%,50%)";
                c.lineWidth = gr * sc;
                c.stroke();

                c.beginPath();
                c.lineTo(w / 2, h / 2);
                c..........完整代码请登录后点击上方下载按钮下载查看