好玩的.随机16进制颜色

版权声明:个人笔记,不喜勿喷 https://blog.csdn.net/qq_39571197/article/details/88927004
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vertical-lines-canvas</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script>
        function genRandom(min, max) {
            return min + Math.floor((max - min) * Math.random());
        }
        function genColor() {
            return `#${genRandom(0, 16).toString(16)}${genRandom(0, 16).toString(16)}${genRandom(0, 16).toString(16)}`;
        }

        // canvas 尺寸在外部指定!
        class VerticalLine {
            constructor({ width = 10, color = '#000', x, y, duration = 2 } = {}) {
                this.width = width;
                this.color = color;
                this.x = x;
                this.y = y;
                this.ty = y;
                this.duration = duration;
                this.done = false;
            }
            draw(ctx, ctxHeight) {
                let speed = ctxHeight / this.duration / 60;
                if (this.y % 6 > 2) {
                    speed *= genRandom(2, 4);
                }
                // 对 y 进行一个转换
                if (!this.done) {
                    this.y += speed;
                } else {
                    this.y -= speed;
                }
                let newY = ctxHeight - this.y;
                if (newY < this.ty) {
                    this.done = true;
                }
                if (newY > ctxHeight) {
                    newY = ctxHeight;
                    this.done = false;
                }
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = this.width;
                ctx.fillStyle = this.color;
                ctx.moveTo(this.x, ctxHeight);
                ctx.lineTo(this.x, newY);
                ctx.lineTo(this.x + this.width, newY);
                ctx.lineTo(this.x + this.width, ctxHeight);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
        }
        class JitterLines {
            constructor(options) {
                const canvas = this.canvas = options.canvas;
                if (options.fullScreen) {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                }
                this.width = canvas.width;
                this.height = canvas.height;
                const ctx = this.ctx = canvas.getContext('2d');
                this.lineWidth = options.lineWidth;
                this.lineColor = options.lineColor;
                this.lines = this.genLines(this.width / this.lineWidth);
                this.run();
            }
            run() {
                // this.clean();
                this.gradual();
                this.lines.forEach(item => {
                    item.draw(this.ctx, this.height);
                });
                window.requestAnimationFrame(() => {
                    this.run();
                });
            }
            genLines(len) {
                const lines = [];
                for (let x = 0; x < len; x++) {
                    lines.push(
                        new VerticalLine({
                            color: this.lineColor || genColor(),
                            width: this.lineWidth,
                            x: x * this.lineWidth,
                            y: genRandom(0, 50),
                            duration: genRandom(1.5, 4),
                        })
                    );
                }
                return lines;
            }
            gradual() {
                this.ctx.save();
                this.ctx.globalCompositeOperation = "source-in";
                this.ctx.fillStyle = 'rgba(0,0,0,0.1)';
                this.ctx.fillRect(0, 0, this.width, this.height);
                this.ctx.restore();
            }
            clean() {
                this.canvas.height = this.canvas.height;
            }
        }
        const jitterLines = new JitterLines({
            canvas: document.getElementById('canvas'),
            lineWidth: 16,
            // lineColor: '#000',
        });
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .point-container {
            display: flex;
            width: 400px;
            height: 400px;
            margin: auto;
            align-items: flex-end;
        }

        .point-container li {
            background-color: red;
            flex-grow: 1;
            animation-fill-mode: backwards;
        }

        @keyframes test {
            from {
                height: 1%;
            }

            70% {
                height: 90%;
            }

            80% {
                height: 50%;
            }

            to {
                height: 1%;
            }
        }
    </style>
</head>

<body>
    <ul class="point-container">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        function getRandom(min, max, fixed = null) {
            const random = min + (max - min) * Math.random();
            return fixed ? random.toFixed(fixed) : fixed;
        }
        function getRandomSecond(min = 0.1, max = 3) {
            return `${getRandom(min, max, 1)}s`;
        }
        (function () {
            const container = document.querySelector('.point-container');
            const points = Array.from(container.querySelectorAll('li'));
            let lastRandom = null;
            points.forEach((item, index) => {
                let random = getRandom(0.1, 2, 1);
                while (random === lastRandom) {
                    random = getRandom(0.1, 2, 1);
                }
                lastRandom = random;
                item.style.transition = `height ${random}s`;
                item.style.animation = `
                test  
                ${getRandomSecond(0.7, 2.5)} 
                ${getRandom(0, 1) > 0.5 ? 'ease-in-out' : 'linear'}
                ${getRandomSecond(0.1, 0.5)}
                infinite`;
            });
        })();
    </script>
</body>

</html>

 

没有更多推荐了,返回首页