鼠标悬停彩色烟花效果

Html

Css

#bg {
	background:black;
}

$(function() {
    var c = $('#bg').get(0);
    var ctx = c.getContext('2d');
    var W = c.width = window.innerWidth;
    var H = c.height = window.innerHeight;
    var OX = W / 2;
    var OY = H / 2;
    var particle = function(x, y) {
        this.initx = x;
        this.inity = y;
        this.x = x;
        this.y = y;
        this.ox = x;
        this.oy = y;
        this.life = Math.round(Math.random() * 20);
        this.vx = Math.random() * 2 - 1;
        this.vy = Math.random() * 2 - 1;
        this.color = Math.random() * 360;
        this.alpha = Math.random();
        this.lineWidth = Math.random() * 4;
    }

particle.prototype = {
        constructor: particle,
        update: function() {
            this.ox = this.x;
            this.oy = this.y;
            this.x += this.vx;
            this.y += this.vy;
            var rx = this.x - this.initx;
            var ry = this.y - this.inity;
            var r = Math.sqrt(rx * rx + ry * ry);
            if (this.life < 0 || r > 50 || this.alpha < 0.1) {
                this.x = this.ox = this.initx;
                this.y = this.oy = this.inity;
                this.life = Math.round(Math.random() * 5000);
                this.vx = Math.random() * 2 - 1;
                this.vy = Math.random() * 2 - 1;
                this.color = Math.random() * 360;
                this.alpha = Math.random();
            }
            this.life -= 1;
        },
        render: function(ctx) {
            ctx.save();
            ctx.globalAlpha = 0.98;
            ctx.lineWidth = this.lineWidth;
            ctx.strokeStyle = 'hsla(' + (this.color) + ', 100%, 50%, ' + this.alpha + ')';
            ctx.beginPath();
            ctx.moveTo(this.ox, this.oy);
            ctx.lineTo(this.x, this.y);
            ctx.stroke();
            ctx.restore();
        }
    }
    var particles = [];
    requestAnimationFrame(function loop() {

requestAnimationFrame(loop);
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = 'lighter';
        if (particles.length < 250) {
            var Particle = new particle(X, Y)

particles.push(Particle);
        }

for (var i = 0; i < 250; i++) {
            particles[i].update()

particles[i].render(ctx);
        }
    })
    var X;
    var Y;
    $('#bg').mousemove(function(e) {
        X = e.pageX;
        Y = e.pageY;
        particles.length = 0;
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

鼠标悬停彩色烟花效果



代码描述：鼠标悬停彩色烟花效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

师寇Dill

相关代码

鼠标悬停彩色烟花效果

最新