JS 实现万花筒特效 JS 原生代码

最新推荐文章于 2024-02-13 00:15:00 发布

蚂蚁上的大象

最新推荐文章于 2024-02-13 00:15:00 发布

阅读量3.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Jensen_Yao/article/details/64924164

版权

JavaScript 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #190117;
            overflow: hidden;
            margin: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<script>
    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();
    var obj = {
        rad: {
            base: 200,
            vary: 25,
            step: Math.PI / 360
        },
        c: {
            w: window.innerWidth,
            h: window.innerHeight
        },
        lay: {
            num: 28,
            dist: 80,
            diff: Math.PI / 66
        },
        run: {
            int: 20
        }
    };
    function Circle(x, y, step) {
        this.x = x;
        this.y = y;
        this.step = step
    }
    Circle.prototype.draw = function($) {
        this.step += obj.rad.step;
        $.beginPath();
        var r = obj.rad.base + Math.sin(this.step) * obj.rad.vary;
        $.arc(this.x, this.y, r, 0, 2 * Math.PI, true);
        $.fill();
    }
    function init() {
        var d = obj.lay.dist,
                t = Math.PI / 3,
                x = obj.c.w / 2,
                y = obj.c.h / 2,
                clay = [
                    [new Circle(x, y, 0)]
                ],
                circ, lay, s, pt, ptx, pty, dx, dy;
        for (lay = 1; lay < obj.lay.num; lay++) {
            circ = [];
            for (s = 0; s < 6; s++) {
                ptx = x + d * lay * Math.cos(t * s);
                pty = y + d * lay * Math.sin(t * s);
                dx = d * Math.cos(t * s + t * 2);
                dy = d * Math.sin(t * s + t * 2);
                for (pt = 0; pt < lay; pt++) {
                    circ.push(new Circle(ptx + dx * pt, pty + dy * pt, -1 * lay * obj.lay.diff));
                }
            }
            clay.push(circ);
        }
        return clay;
    }
    var c = document.createElement('canvas');
    c.width = obj.c.w;
    c.height = obj.c.h;
    document.body.appendChild(c);
    var $ = c.getContext('2d');
    $.fillRect(0, 0, c.width, c.height);
    $.globalCompositeOperation = 'xor';
    $.fillStyle = 'hsla(304, 95%, 75%, 1)';
    c.addEventListener('load', resize);
    c.addEventListener('resize', resize, false);
    function resize() {
        c.width = w = window.innerWidth;
        c.height = h = window.innerHeight;
        c.style.position = 'absolute';
        c.style.left = (window.innerWidth - w) *
                .01 + 'px';
        c.style.top = (window.innerHeight - h) *
                .01 + 'px';
    }
    var clay = init();
    function run() {
        var i, j, ilen, jlen;
        $.clearRect(0, 0, obj.c.w, obj.c.h);
        for (i = 0, ilen = clay.length; i < ilen; i++) {
            for (j = 0, jlen = clay[i].length; j < jlen; j++) {
                clay[i][j].draw($);
            }
        }
    }
    function go() {
        run();
        window.requestAnimFrame(go);
    }
    go();
</script>
</body>
</html>

蚂蚁上的大象

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
JS 实现万花筒特效 JS 原生代码

Title body { background: #190117; overflow: hidden; margin: 0; width: 100%; } window.requestAnimFrame = (function() {
复制链接

扫一扫