鼠标跟随粒子效果(免费附源码)

html5实现的跟随鼠标3D波浪粒子特效源码，是一段实现的模拟在电脑、手机、平板电脑等设备上显示的跟随鼠标3D波浪粒子特效代码，html5跟随鼠标3D波浪粒子特效是一款html5 3D波浪粒子动画特效。本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码.

在这里插入图片描述

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <canvas id='c'></canvas>
</body>
<script>
    /**
     * requestAnimationFrame
     */
    window.requestAnimationFrame = (function() {
     
     
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
     
     
                window.setTimeout(callback, 1000 / 60);
            };
    })();


    /**
     * Twinkle
     */
    var Twinkle = (function() {
     
     

        // Config

        var STAR_VERTEX_NUMS = [4, 6, 8, 10, 12],
            MAX_STAR_NUM = 2500;


        /**
         * @constructor
         */
        function Twinkle(starColor, starRadius, starBlur) {
     
     
            this.initSymbols(starColor, starRadius, starBlur);

            this.particles = [];
            this._pool = [];
            this.mouse = new Mouse();
        }

        Twinkle.prototype = {
     
     
            mouse: null,
            gravity: 0.035,

            initSymbols: function(color, radius, blur) {
     
     
                this._symbols = new Symbols(color, radius, blur);
            },

            render: function(ctx) {
     
     
                var particles = this.particles,
                    mouse = this.mouse,
                    gravity = this.gravity,
                    speedRatio,
                    magMax,
                    magMin,
                    scaleMax,
                    symbols = this._symbols,
                    symbolNum = this._symbols.length,
                    symbol,
                    size = this._symbols.size,
                    radius = this._symbols.size * 0.5,
                    drawSize,
                    drawSizeHalf,
                    drawScale,
                    canvasWidth = ctx.canvas.width,
                    canvasHeight = ctx.canvas.height,
                    fieldLeft,
                    fieldRight,
                    fieldTop,
                    fieldBottom,
                    i, len, p;

                speedRatio = Math.min((mouse.speedX * mouse.speedX + mouse.speedY * mouse.speedY) * 0.005, 1);

                if (particles.length < MAX_STAR_NUM) {
     
     
                    magMax = 0.5 + 4.5 * speedRatio;
                    magMin = 0.1 + 0.5 * speedRatio;
                    scaleMax = 0.5 + 0.5 * speedRatio;
                    len = (3 * Math.random() | 0) + (20 * speedRatio | 0);
                    for (i = 0; i < len; i++) this._createParticle(magMin, magMax, scaleMax);
                }

                fieldLeft = -canvasWidth * 0.5;
                fieldRight = canvasWidth * 1.5;
                fieldTop = -canvasHeight * 0.5;
                fieldBottom = canvasHeight * 1.5;

                for (i = 0, len = particles.length; i < len; i++) {
     
     
                    p = particles[i];

                    p.vx += mouse.speedX * 0.03 * speedRatio;
                    p.vy += mouse.speedY * 0.03 * speedRatio + gravity;
                    p.x += p.vx + mouse.speedX;
                    p.y += p.vy + mouse.speedY;
                    p.scale -= 0.005;
                    p.angle += Math.random();

                    if (
                        p.x + radius < fieldLeft ||
                        p.x - radius > fieldRight ||
                        p.y + radius < fieldTop ||
                        p.y - radius > fieldBottom ||
                        p.scale <= 0
                    ) {
     
     
                        this._pool.push(p);
                        particles.splice(i, 1);
                        len--;
                        i--;
                        continue;
                    }

                    drawScale = p.scale;

                    symbol = symbols[symbolNum * Math.random() | 0];
                    if (Math.random() < 0.7) drawScale *= 0.2;
                    drawSize = size * drawScale;
                    drawSizeHalf = drawSize * 0.5;

                    ctx.save();
                    ctx.globalCompositeOperation = 'lighter';
                    ctx.translate(p.x, p.y);
                    ctx.rotate(p.angle);
                    ctx.drawImage(symbol, 0, 0, size, size, -drawSizeHalf, -drawSizeHalf, drawSize, drawSize);
                    ctx.restore();
                }

                ctx.fill();

                mouse.speedX = mouse.speedY = 0;
            },

            _createParticle: function(magMin, magMax, scaleMax) {
     
     
                var mag = magMin + (magMax - magMin) * Math.random(),
                    angle = Math.PI * 2 * Math.random(),
                    p = this._pool.length ? this._pool.shift() : new Particle();

                p.init(
                    this.mouse.x,
                    this.mouse.y,
                    mag * Math.cos(angle),
                    mag * Math.sin(angle),
                    scaleMax * Math.random(),
                    Math.PI * 2 * Math.random()
                );

                this.particles.push(p);
            }
        };


        /**
         * Mouse
         * @private
         */
        function Mouse(x, y) {
     
     
            this.x = x || 0;
            this.y = y || 0;
        }

        Mouse.prototype = {
     
     
            x: 0,
            y: 0,
            speedX: 0,
            speedY: 0,

            update: function(x, y) {
     
     
                this.speedX = (this.x - x) * 0.7;
                this.speedY = (this.y - y) * 0.7;
                this.x = x;
                this.y = y;
            }
        };


        /**
         * Symbols
         * @see STAR_VERTEX_NUMS
         * @private
         */
        function Symbols(color, radius, blur) {
     
     
            this.color = parseColor(color);
            this.size = (radius + blur) * 2;

            for (var i = 0, len = STAR_VERTEX_NUMS.length; i < len; i++) {
     
     
                this.push(this._createSymbol(STAR_VERTEX_NUMS[i], radius, blur));
            }
        }

        Symbols.prototype = [];

        Symbols.prototype._createSymbol = function(vertexNum, radius, blur) {
     
     
            var canvas,
                context,
                size = this.size,
                center = this.size / 2,
                color = this.color;

            canvas = document.createElement('canvas');
            canvas.width = canvas.height = size;

            context = canvas.getContext('2d');
            context.fillStyle = colorToString(color[0], color[1], color[2], color[3], color[4]);
            context.shadowBlur = blur;
            context.shadowColor = colorToString(color[0], color[1], color[2], color[3], color[4] * 0.75);

            var i, len, r, a;

            context.beginPath();
            for (i = 1, len = vertexNum * 2; i <= len; i++) {
     
     
                r = i % 2 ? radius * 0.1 : radius;
                a = Math.PI * 2 * i / len;
                context[i === 1 ? 'moveTo' : 'lineTo'](center + r * Math.cos(a), center + r * Math.sin(a));
            }
            context.fill();

            return canvas;
        };


        /**
         * Particle
         * @private
         */

        function update() {
     
     
            context.fillStyle = Configs.backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = grad;
            context.fillRect(0, 0, canvas.width, canvas.height);

            twinkle.render(context);

            requestAnimationFrame(update);
        }


        // Run

        init();

    })();
</script>
 ...关注↓下方公众号 '回复003' 即可获取源码
</html>