HTML5 Canvas 粒子聚合/离散动画

可以滚动鼠标的中间键来改变粒子吸引的范围。

html5, particle, 引力

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var ww = window.innerWidth,
    wh = window.innerHeight,
    canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d"),
    canvasWidth = ww,
    canvasHeight = wh,
    particles = []
quantity = 1200,
    count = 0,
    x = ww / 2,
    y = wh / 2,
    range = 50,
    mousedown = false;

canvas.width = canvasWidth;
canvas.height = canvasHeight;

function between(x, min, max) {
    return x >= min && x <= max;
}

function draw() {

ctx.fillStyle = "black";
    ctx.fillRect(0, 0, ww, wh);

count++;

if (count < quantity) {
        var particle = {
            position: {
                x: parseInt(Math.random() * ww),
                y: parseInt(Math.random() * wh)
            },
            destination: {
                x: parseInt(Math.random() * ww),
                y: parseInt(Math.random() * wh)
            },
            size: parseInt(Math.random() * 10) + 2,
            color: "hsl(0,0%," + (Math.random() * 100 + 10) + "%)"
        }
        particles.push(particle);
    }

for (var i = 0, j = particles.length; i < j; i++) {
        var particle = particles[i];

particle.position.x += (particle.destination.x - particle.position.x) * 0.02;
        particle.position.y += (particle.destination.y - particle.position.y) * 0.02;

if (between(x, particle.position.x - range, particle.position.x + range) &&
            between(y, particle.position.y - range, particle.position.y + range)) {
            particle.destination = {
                x: parseInt(Math.random() * ww),
                y: parseInt(Math.random() * wh)
            }
        }

if (Math.random() < .0005) {
            particle.destination = {
                x: parseInt(Math.random() * ww),
                y: parseInt(Math.random() * wh)
            }
        }

ctx.beginPath();
        ctx.fillStyle = particle.color;
        ctx.arc(particle.position.x, particle.position.y, particle.size, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.closePath();

}

ctx.beginPath();
    ctx.fillStyle = "rgba(255,255,255,.1)";
    ctx.lineWidth = 10;
    ctx.arc(x, y, range, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();

requestAnimFrame(draw);
}

document.body.addEventListener("mousemove", function(e) {
    x = e.clientX;
    y = e.clientY;
});

document.body.addEventListener("mousewheel", function(e) {
    if (e.wheelDelta > 0) {
        range = Math.min(500, range += 30);
    } else {
        range = Math.max(0, range -= 30);
    }
});

draw();

window.onresize = function() {
    ww = window.innerWidth;
    wh = window.innerHeight;
    canvas.width = ww;
    canvas.height = wh;
}

编译

CSS

HTML

可以滚动鼠标的中间键来改变粒子吸引的范围。

html5, particle, 引力

编辑器支持Emmet

快捷键

可以滚动鼠标的中间键来改变粒子吸引的范围。

html5, particle, 引力

HTML5/Canvas 瞳孔粒子动画

HTML5 Canvas炫酷粒子动画特效在线生成系统

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：