js实现canvas圆点模糊粒子动画效果代码-html代码-BFW代码库

js实现canvas圆点模糊粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas圆点模糊粒子动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html, body {
            margin:0;
            padding:0;
        }

        canvas {
            display:block;
            background:#705;
            cursor:pointer;
        }
    </style>

</head>

<body>

    <canvas></canvas>

    <script>
        const rnd = () => {
        return 1 - Math.random() * 2;
    };
    
    const vary = (base, range) => {
        return base + base * rnd() * range;
    };
    
    class CircleScene
    {
        constructor() {
    
            this.config = {
                types: {
                    micro:  {color: 300, count: 1300, size: 0.02, blur: 0.005, mv: 0.0001},
                    small:  {color: 300, count: 200,  size: 0.04, blur: 0.001, mv: 0.0002},
                    middle: {color: 300, count: 70,   size: 0.12, blur: 0.01,  mv: 0.0003},
                    big:    {color: 300, count: 9,    size: 0.3,  blur: 0.1,   mv: 0.001},
                    huge:   {color: 300, count: 3,    size: 0.6,  blur: 0.4,   mv: 0.001}
                }
            };
    
            this.width   = window.innerWidth;
            this.height  = window.innerHeight;
            this.refSize = (this.width + this.height) / 2;
    
            this.canvas = document.querySelector('canvas');
            this.engine = this.canvas.getContext('2d');
          
            this.xMove = 20;
          
            this.canvas.addEventListener('click', () => {
              this.xMove += 20;
            });
    
            this.canvas.setAttribute('width', this.width);
            this.canvas.setAttribute('height', this.height);
    
            this.objects = [];
    
            this.build();
    
        }
    
        build() {
    
            const color = (c) => { return `hsl(${c % 360 | 0}, 100%, 50%)`; };
    
            Object.keys(this.config.types).forEach(type => {
    
                const ref = this.config.types[type];
    
                for (let i = 0; i < ref.count; i++) {
    
                    const size     = vary(ref.size, 0.5);
                    const blur     = size / ref.size * ref.blur;
                    const fullSize = size + blur * 2;
                    const mid      = fullSize / 2;
    
                    const canvas = document.createElement('canvas');
                    const engine = canvas.getContext('2d');
    
                    canvas.setAttribute('width', fullSize * this.refSize | .........完整代码请登录后点击上方下载按钮下载查看