鼠标跟随火焰[炫]

Html

Css

#myCanvas {
	position:absolute;
	left:0px;
	top:0px;
}

function aa() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

//Make the canvas occupy the full page
    var W = window.innerWidth,
        H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;

var particles = [];
    var mouse = {};

//Lets create some particles now
    var particle_count = 50;
    for (var i = 0; i < particle_count; i++) {
        particles.push(new particle());
    }

//finally some mouse tracking
    canvas.addEventListener('mousemove', track_mouse, false);

function track_mouse(e) {
        //since the canvas = full page the position of the mouse 
        //relative to the document will suffice
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    }

function draw() {
        //Painting the canvas black
        //Time for lighting magic
        //particles are painted with "lighter"
        //In the next frame the background is painted normally without blending to the 
        //previous frame
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = "lighter";

for (var i = 0; i < particles.length; i++) {
            var p = particles[i];
            ctx.beginPath();
            //changing opacity according to the life.
            //opacity goes to 0 at the end of life of a particle
            p.opacity = Math.round(p.remaining_life / p.life * 100) / 100
            //a gradient instead of white fill
            var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
            gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
            gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
            gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");
            ctx.fillStyle = gradient;
            ctx.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false);
            ctx.fill();

//lets move the particles
            p.remaining_life--;
            p.radius--;
            p.location.x += p.speed.x;
            p.location.y += p.speed.y;

//regenerate particles
            if (p.remaining_life < 0 || p.radius < 0) {
                //a brand new particle replacing the dead one
                particles[i] = new particle();

}
        }
    }

setInterval(draw, 30);
}
aa();

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

立即下载

鼠标跟随火焰[炫]

代码描述：鼠标跟随，火焰特效

特效可跟随鼠标移动

1

最新

发表评论全部评论

暂时没有评论！

ユメノ0

2017/5/22 18:32:20

好看
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??氢柠【H.】 ?? ??

相关代码

鼠标跟随火焰[炫]

最新