火焰效果

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

console.clear();

let $ = {};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| UTILITY
           |=|________________________________/
*/

$.PI = Math.PI;
$.TAU = $.PI * 2;

$.rand = (min, max) => {
	return Math.random() * (max - min) + min;
};

$.hsla = (h, s, l, a) => {
	return `hsla(${h}, ${s}%, ${l}%, ${a})`;
};

$.baseRange = (base, range) => {
	return base + $.rand(-range, range);
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| POOL
           |=|________________________________/
*/

$.Pool = class Pool {
	constructor(base, preallocateAmount) {
		this.base = base;
		this.preallocateAmount = preallocateAmount || 0;
		this.alive = [];
		this.dead = [];
		this.length = 0;
		this.deadLength = 0;
		if (this.preallocateAmount) {
			this.preallocate();
		}
	}
	preallocate() {
		for (var i = 0; i < this.preallocateAmount; i++) {
			this.dead.push(new this.base());
			this.deadLength++;
		}
	}
	create(opt) {
		if (this.deadLength) {
			var obj = this.dead.pop();
			obj.init(opt);
			this.alive.push(obj);
			this.deadLength--;
			this.length++;
			return obj;
		} else {
			var newItem = new this.base();
			newItem.init(opt);
			this.alive.push(newItem);
			this.length++;
			return newItem;
		}
	}
	release(obj) {
		var i = this.alive.indexOf(obj);
		if (i > -1) {
			this.dead.push(this.alive.splice(i, 1)[0]);
			this.length--;
			this.deadLength++;
		}
	}
	empty() {
		this.alive.length = 0;
		this.dead.length = 0;
		this.length = 0;
		this.deadLength = 0;
	}
	each(action, asc) {
		var i = this.length;
		while (i--) {
			this.alive[i][action](i);
		}
	}
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| PARTICLE
           |=|________________________________/
*/

$.Particle = class Particle {
	constructor() {}
	init(opt) {
		Object.assign(this, opt);
		this.life = 1;
	}
	step() {
		this.velocity += this.acceleration;
		this.angle += $.rand(-this.wander, this.wander);
		this.x += Math.cos(this.angle) * this.velocity;
		this.y += Math.sin(this.angle) * this.velocity;
		this.life -= this.decay;
		this.alpha = this.fade ? (this.life * 1.5) : 1;
		if (this.life < 0) {
			this.parent.particles.release(this);
		}
	}
	draw() {
		$.ctx.beginPath();
		$.ctx.arc(this.x, this.y, this.radius, 0, $.TAU);
		$.ctx.fillStyle = $.hsla(this.hue, this.saturation, this.lightness, this.alpha);
		$.ctx.fill();
	}
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| PARTICLE EMITTER
           |=|________________________________/
*/

$.ParticleEmitter = class particleEmitter {
	constructor(opt) {
		Object.assign(this, opt);
		this.particles = new $.Pool($.Particle, 100);
	}
	step() {
		if ($.tick % this.interval === 0) {
			this.particles.create({
				parent: this,
				x: $.baseRange(this.x.base, this.x.range),
				y: $.baseRange(this.y.base, this.y.range),
				radius: $.baseRange(this.radius.base, this.radius.range),
				angle: $.baseRange(this.angle.base, this.angle.range),
				velocity: $.baseRange(this.velocity.base, this.velocity.range),
				acceleration: $.baseRange(this.acceleration.base, this.acceleration.range),
				decay: $.baseRange(this.decay.base, this.decay.range),
				hue: $.baseRange(this.hue.base, this.hue.range),
				saturation: $.baseRange(this.saturation.base, this.saturation.range),
				lightness: $.baseRange(this.lightness.base, this.lightness.range),
				wander: this.wander,
				fade: this.fade,
			});
		}
		this.particles.each('step');
	}
	draw() {
		$.ctx.globalCompositeOperation = this.blend;
		this.particles.each('draw');
	}
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| INIT
           |=|________________________________/
*/

$.init = () => {
	$.c = document.querySelector('canvas')
	$.ctx = $.c.getContext('2d');
	$.w = $.c.width = 400;
	$.h = $.c.height = 400;
	$.particleEmitters = [];
	$.tick = 1;

// Spark Emitter
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w * 0.5,
			range: 20
		},
		y: {
			base: $.h,
			range: 20
		},
		radius: {
			base: 0.75,
			range: 0.4
		},
		angle: {
			base: -$.PI * 0.5,
			range: $.PI * 0.01
		},
		velocity: {
			base: 0.5,
			range: 0.5
		},
		acceleration: {
			base: 0.01,
			range: 0.01
		},
		decay: {
			base: 0.005,
			range: 0.001
		},
		hue: {
			base: 30,
			range: 30
		},
		saturation: {
			base: 80,
			range: 20
		},
		lightness: {
			base: 80,
			range: 20
		},
		wander: 0.06,
		blend: 'lighter',
		fade: true,
		interval: 5
	}));

// Negative Emitter 1
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w - 100,
			range: 25
		},
		y: {
			base: $.h,
			range: 5
		},
		radius: {
			base: 20,
			range: 10
		},
		angle: {
			base: -$.PI * 0.55,
			range: $.PI * 0.05
		},
		velocity: {
			base: 2,
			range: 0
		},
		acceleration: {
			base: 0.02,
			range: 0.01
		},
		decay: {
			base: 0.001,
			range: 0
		},
		hue: {
			base: 0,
			range: 0
		},
		saturation: {
			base: 0,
			range: 0
		},
		lightness: {
			base: 0,
			range: 0
		},
		wander: 0.05,
		blend: 'destination-out',
		fade: false,
		interval: 1
	}));

// Negative Emitter 2
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: 100,
			range: 25
		},
		y: {
			base: $.h,
			range: 5
		},
		radius: {
			base: 20,
			range: 10
		},
		angle: {
			base: -$.PI * 0.45,
			range: $.PI * 0.05
		},
		velocity: {
			base: 2,
			range: 0
		},
		acceleration: {
			base: 0.02,
			range: 0.01
		},
		decay: {
			base: 0.001,
			range: 0
		},
		hue: {
			base: 0,
			range: 0
		},
		saturation: {
			base: 0,
			range: 0
		},
		lightness: {
			base: 0,
			range: 0
		},
		wander: 0.05,
		blend: 'destination-out',
		fade: false,
		interval: 1
	}));

// Yellow Emitter
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w * 0.5,
			range: 20
		},
		y: {
			base: $.h,
			range: 20
		},
		radius: {
			base: 15,
			range: 5
		},
		angle: {
			base: -$.PI * 0.5,
			range: $.PI * 0.05
		},
		velocity: {
			base: 1.5,
			range: 0
		},
		acceleration: {
			base: 0.02,
			range: 0.01
		},
		decay: {
			base: 0.0075,
			range: 0
		},
		hue: {
			base: 60,
			range: 0
		},
		saturation: {
			base: 100,
			range: 0
		},
		lightness: {
			base: 70,
			range: 0
		},
		wander: 0.01,
		blend: 'source-over',
		fade: false,
		interval: 2
	}));

// White Emitter
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w * 0.5,
			range: 20
		},
		y: {
			base: $.h - 20,
			range: 20
		},
		radius: {
			base: 2,
			range: 1
		},
		angle: {
			base: -$.PI * 0.5,
			range: $.PI * 0.001
		},
		velocity: {
			base: 0.5,
			range: 0
		},
		acceleration: {
			base: 0.02,
			range: 0.02
		},
		decay: {
			base: 0.0075,
			range: 0
		},
		hue: {
			base: 60,
			range: 0
		},
		saturation: {
			base: 90,
			range: 0
		},
		lightness: {
			base: 100,
			range: 0
		},
		wander: 0.025,
		blend: 'source-over',
		fade: false,
		interval: 3
	}));

// Orange Emitter
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w * 0.5,
			range: 20
		},
		y: {
			base: $.h - 20,
			range: 15
		},
		radius: {
			base: 25,
			range: 5
		},
		angle: {
			base: -$.PI * 0.5,
			range: $.PI * 0.025
		},
		velocity: {
			base: 2,
			range: 0.25
		},
		acceleration: {
			base: 0.01,
			range: 0.01
		},
		decay: {
			base: 0.0075,
			range: 0
		},
		hue: {
			base: 30,
			range: 0
		},
		saturation: {
			base: 90,
			range: 0
		},
		lightness: {
			base: 50,
			range: 0
		},
		wander: 0.01,
		blend: 'source-over',
		fade: false,
		interval: 2
	}));

// Red Emitter
	$.particleEmitters.push(new $.ParticleEmitter({
		x: {
			base: $.w * 0.5,
			range: 30
		},
		y: {
			base: $.h - 20,
			range: 15
		},
		radius: {
			base: 35,
			range: 10
		},
		angle: {
			base: -$.PI * 0.5,
			range: $.PI * 0.025
		},
		velocity: {
			base: 2,
			range: 0.25
		},
		acceleration: {
			base: 0.01,
			range: 0.01
		},
		decay: {
			base: 0.0075,
			range: 0
		},
		hue: {
			base: 0,
			range: 0
		},
		saturation: {
			base: 90,
			range: 0
		},
		lightness: {
			base: 50,
			range: 0
		},
		wander: 0.01,
		blend: 'source-over',
		fade: false,
		interval: 2
	}));

$.gradient = $.ctx.createLinearGradient(0, 0, 0, $.h * 0.75);
	$.gradient.addColorStop(0, $.hsla(0, 0, 0, 1));
	$.gradient.addColorStop(1, $.hsla(0, 0, 0, 0));

$.loop();
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| STEP
           |=|________________________________/
*/

$.step = () => {
	let i = $.particleEmitters.length;
	while (i--) {
		$.particleEmitters[i].step();
	}
	$.tick++;
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| DRAW
           |=|________________________________/
*/

$.draw = () => {
	$.ctx.clearRect(0, 0, $.w, $.h);
	let i = $.particleEmitters.length;
	while (i--) {
		$.particleEmitters[i].draw();
	}

$.ctx.globalCompositeOperation = 'destination-out';
	$.ctx.fillStyle = $.gradient;
	$.ctx.fillRect(0, 0, $.w, $.h);

$.ctx.beginPath();
	$.ctx.globalCompositeOperation = 'source-over';
	$.ctx.arc($.w * 0.5, $.h + 40, 63, 0, $.TAU);
	$.ctx.fillStyle = '#f00';
	$.ctx.fill();

$.ctx.beginPath();
	$.ctx.globalCompositeOperation = 'source-over';
	$.ctx.arc($.w * 0.5, $.h + 40, 60, 0, $.TAU);
	$.ctx.fillStyle = '#000';
	$.ctx.fill();
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| LOOP
           |=|________________________________/
*/

$.loop = () => {
	requestAnimationFrame($.loop);
	$.step();
	$.draw();
};

/*
           |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/
[::{}{}{}{}|=| TO BATTLE!
           |=|________________________________/
*/

$.init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg