使用Canvas各种混合模式来绘制粒子

Particles & Blend Modes 是一个在线学习和测试canvas合成模式的好例子！

canvas, particle, 基础知识

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// SETUP

var win = window,
    doc = document,
    body = doc.body;

var ww = win.innerWidth,
    wh = win.innerHeight;

var c = doc.createElement('canvas'),
    ctx = c.getContext("2d");

var cx = ww / 2,
    cy = wh / 2;

var mouseX = 0,
    mouseY = 0;

var gco = ['source-over', 'source-in', 'source-out', 'source-atop',            'destination-over', 'destination-in', 'destination-out', 'destination-atop',            'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken',            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];

c.width = ww;
c.height = wh;

body.appendChild(c);
body.style.overflow = 'hidden';

(function() {
    var btn_style = 'color: white; display: block; cursor: pointer; padding: 5px; font-size: 10px; font-family: sans-serif; text-transform: uppercase;',
        active_style = btn_style + ' color: #bada55;';

var els = [];
    var btns = doc.createElement('div');
    btns.setAttribute('style', 'position: fixed; top: 10px; left: 10px; padding: 10px; z-index: 2; max-height: calc(100vh - 40px); overflow-y: scroll;');
    body.appendChild(btns);

btns.addEventListener('click', function(e) {
        if (e.target.nodeName == 'I') {
            cfg.gco = e.target.getAttribute('data-mode');

for (var i = 0; i < els.length; i++) {
                els[i].setAttribute('style', btn_style);
            }

e.target.setAttribute('style', active_style);
        }
    });

for (var i = 0; i < gco.length; i++) {
        var el = doc.createElement('i');
        el.setAttribute('data-mode', gco[i]);
        el.setAttribute('style', btn_style)
        el.textContent = gco[i];
        els.push(el);
        btns.appendChild(el);
    }
})();

win.addEventListener('resize', function() {
    ww = win.innerWidth;
    wh = win.innerHeight;
    c.width = ww;
    c.height = wh;
    cx = ww / 2;
    cy = wh / 2;
});
// =======================================

// SETTINGS

var cfg = {
    count: 60,
    size: 2,
    gco: 'none',
    bg: 'rgba(20,20,20, 0.2)',
    colors: ['#BE4657', '#2C4248', '#96174A', '#17987A', '#494C56', '#047373', '#D45A67', '#4F2590']
};

var particles = [];

function rand(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

function isOOB(p) {
    if (p.x + p.size < 0 || p.x - p.size > ww || p.y + p.size < 0 || p.y - p.size > wh) {
        return true;
    }
}

function getMouse(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
}

win.addEventListener('mousemove', getMouse);

function Particle(i) {
    this.x = rand(0, ww);
    this.y = rand(0, wh);
    this.size = cfg.size;
    this.id = i;
    this.color = cfg.colors[rand(0, cfg.colors.length)];

this.vx = Math.random() * 5;
    this.vy = Math.random() * 5;

this.angle = rand(3, 10);
    this.speed = ww / 500;

particles.push(this);

this.update = function() {

this.x += Math.sin((Math.PI * 1) + (this.angle)) * this.vx;
        this.y += Math.cos((Math.PI * 1) + (this.angle)) * this.vy;

this.angle += 0.02;

if (isOOB(this)) {
            this.x = rand(0, ww);
            this.y = rand(0, wh);
        }

};

this.draw = function() {
        ctx.beginPath();
        ctx.fillStyle = this.color;

// arc(x, y, radius, startAngle, endAngle, anticlockwise)
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

// 		ctx.beginPath();
        // 		ctx.strokeStyle = "white";

// 		var ti;
        // 		if (this.id == particles.length - 1) {
        // 			ti = 0;
        // 		} else {
        // 			ti = this.id+1;
        // 		}

// 		ctx.moveTo(this.x, this.y);
        // 		ctx.lineTo(particles[ti].x, particles[ti].y);
        // 		ctx.closePath();
        // 		ctx.stroke();
    }
}

for (var i = 0; i <= cfg.count; i++) {
    new Particle(i);
}

function animate() {
    ctx.globalCompositeOperation = cfg.gco;
    ctx.fillStyle = cfg.bg;
    ctx.fillRect(0, 0, ww, wh);

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

requestAnimationFrame(animate);
}
animate();

编译

CSS

HTML

Particles & Blend Modes 是一个在线学习和测试canvas合成模式的好例子！

canvas, particle, 基础知识

编辑器支持Emmet

快捷键

Particles & Blend Modes 是一个在线学习和测试canvas合成模式的好例子！

canvas, particle, 基础知识

在canvas使用圆形（circles）绘制各种模式图案

使用HTML5 Canvas绘制经典漩涡粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：