分形时钟运动轨迹效果

代码语言: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
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0