CANVAS 简易的在鼠标位置显示粒子群的动效

Just a simplest particle canvas 一个简单的方法来给鼠标添加魔法效果。

CANVAS

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3544
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var canvasBody = document.getElementById("canvas"),
        ctx = canvasBody.getContext("2d"),

w = canvasBody.width = window.innerWidth,
        h = canvasBody.height = window.innerHeight,

opts = {
            bgColor: "rgba(200,200,200,alpha)",
            bgAlpha: 1,

particleAmount: 100,
            particleStyle: "#fcc",
            particleSize: 2,

radius: 50,
            blinkChance: 0.015
        },

particles = [],
        tick = 0,

mPress = false,
        mPos = {
            x: w / 2,
            y: h / 2,
        }

function loop() {
        window.requestAnimationFrame(loop);

ctx.fillStyle = "rgba(0,0,0,0.05)"
        ctx.fillRect(0, 0, w, h);

tick++;

//Pushing particles in, they won't be pushed any time, only now...
        while (opts.particleAmount) {
            particles.push(new Particle());
            opts.particleAmount--
        }

//Calling every particle to blink and/or update
        particles.map(function(Particle) {
            Particle.update();
            Particle.blink();
        });
    };

//The constructor of the particle. It stores all the functions and coords for the particles object
    function Particle() {
        this.x = 0;
        this.y = 0;
        this.style = opts.particleStyle;

//The update function of the particle will update its position
        this.update = function() {
            var randomX = mPos.x - (Math.random() * (opts.radius * 2) - opts.radius),
                randomY = mPos.y - (Math.random() * (opts.radius * 2) - opts.radius);
            this.x = randomX;
            this.y = randomY;
        };

//And then the blink function makes those particles blink.
        this.blink = function() {
            var chance = Math.random();
            if (chance < opts.blinkChance) {
                ctx.fillStyle = this.style;
                ctx.fillRect(this.x, this.y, opts.particleSize, opts.particleSize);
            }
        }
    };

//Calling the loop function to start the whole thing. Then, the loop will call itself by window.requestAnimationFrame
    loop();

//On mouseDown
    window.addEventListener("mousedown", function() {
        mPress = true;
    });

//On mouseUp
    window.addEventListener("mouseup", function() {
        mPress = false;
    });

//On mouseMove
    window.addEventListener("mousemove", function(e) {
        mPos.x = e.pageX;
        mPos.y = e.pageY;
    })

//On resize
    window.addEventListener("resize", function() {
        w = canvasBody.width = window.innerWidth;
        h = canvasBody.height = window.innerHeight;

//centering the mouse position
        mouseP = {
            x: w / 2,
            y: h / 2
        }
    });

})();

编译

CSS

HTML

Just a simplest particle canvas 一个简单的方法来给鼠标添加魔法效果。

CANVAS

编辑器支持Emmet

快捷键

Just a simplest particle canvas 一个简单的方法来给鼠标添加魔法效果。

CANVAS

CANVAS 跟着鼠标位置撒落的粒子

CANVAS 随着鼠标位置隐现的点点阵列

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：