js实现四色托盘背景效果代码-html代码-BFW代码库

js实现四色托盘背景效果代码

代码语言：html

所属分类：背景

代码描述：js实现四色托盘背景效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .scene {
            width: 100vw;
            height: 100vh;
        }
    </style>




</head>

<body >
    <svg class="scene" id="illustration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img">
        <title id="svgTitle">A generative illustration</title>
        <desc id="svgDesc">Click on the image to redraw it!</desc>
    </svg>


    <script>
        const settings = {
            colors: {
                decor: ["#432ee6",
                    "#e62e74",
                    "#d0e62e",
                    "#2ee69f"],
                main: ["#dddddd",
                    "#222222"]
            },
            decor: {
                count: 25,
                minWidth: 1,
                maxWidth: 2,
                minHeight: 3,
                maxHeight: 12
            },
            sizes: {
                columns: 35,
                rows: 50,
                maxColumnPart: 4
            }
        };

        const utils = {
            getRandFromRange: function (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            count: function (array) {
                return array.length
                ? array.reduce(function (previous, current) {
                    return previous + current;
                }): 0;
            }
        };

        class Illustration {
            baseHeight;
            baseWidth;
            columns;
            columnCount;
            rowCount;
            maxColumnPart;
            decor;
            colors;
            screen = {
                width: 0,
                height: 0
            };
            svg;

            constructor(selector, colors, decor, sizes) {
                this.screen = {
                    width: window.innerWidth,
                    height: window.innerHeight
                };

                this.setSVG(selector);

                this.columns = [];

                this.decor = decor;
                this.colors = colors;

                this.columnCount = sizes.columns;
                this.rowCount = sizes.rows;
                this.maxColumnPart = sizes.maxColumnPart;

                this.baseHeight = this.screen.height / this.rowCount;
                this.baseWidth = this.screen.width / this.columnCount;

                this.draw();
            }

            setSVG(selector) {
                this.svg = document.querySelector(selector);
                this.svg.addEventListener("click", this.draw.bind(this));
                this.svg.setAttribute(
                    "viewBox",
                    `0 0 ${this.screen.width} ${this.screen.height}`
                );
            }

            reset() {
                this.columns = [];
                this.svg.innerHTML = "";
            }

            setColumns() {
                for (let i = 0; i < this.columnCount;) {
                    const maxSize = this.columnCount - i;
                    const size = utils.getRandFromRange(
                        1,
                        maxSize < this.maxColumnPart ? maxSize: this.maxColumnPart
                    );
                    this.columns.push(size);
                    i += si.........完整代码请登录后点击上方下载按钮下载查看