HTML5 Canvas山脉迷雾重重动画

层峦叠嶂的动画特效

html5, mountain

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

{
	class Layer {
		constructor(nPoints) {
			this.n = nPoints;
			this.points = [];
			for (let i = 0; i < this.n; i++) {
				this.points[i] = {
					x: canvasWidth / (this.n - 1) * i,
					y: Math.random() * canvasHeight * 0.5
				};
			}
		}
		transform(layer) {
			for (let i = 0; i < this.n; i++) {
				const p = this.points[i];
				const v = vel[i];
				v.y += Math.random() * 1 - 0.5;
				v.y *= 0.99;
				p.y = layer.points[i].y + v.y;
				if (p.y < 0) {
					p.y = 0;
					v.y *= -1;
				} else if (p.y > canvasHeight * 0.5) {
					p.y = canvasHeight * 0.5;
					v.y *= -1;
				}
			}
			const w = canvasWidth / (this.n - 1);
			for (let i = 1; i < this.n - 1; i++) {
				const p = this.points[i];
				const v = vel[i];
				v.x += Math.random() * 0.5 - 0.25;
				v.x *= 0.99;
				p.x = layer.points[i].x + v.x;
				if (p.x < w * i - w * 0.45) {
					p.x = w * i - w * 0.45;
					v.x *= -1;
				} else if (p.x > w * i + w * 0.45) {
					p.x = w * i + w * 0.45;
					v.x *= -1;
				}
			}
		}
		draw(i) {
			const z = 1.0 + i * zoom;
			const x = -canvasWidth * (i * zoom) * 0.5;
			ctx.beginPath();
			ctx.fillStyle = "hsla(42,20%," + (100 - 1.5 * i * 100 / nLayers) + "%,1)";
			ctx.moveTo(0, canvasHeight);
			for (let i = 1; i < this.n - 1; ++i) {
				const p0 = this.points[i];
				const p1 = this.points[i + 1];
				ctx.quadraticCurveTo(
					x + p0.x * z,
					p0.y * z,
					x + (p0.x + p1.x) / 2 * z,
					(p0.y + p1.y) / 2 * z
				);
			}
			ctx.lineTo(canvasWidth, canvasHeight);
			ctx.fill();
		}
	}
	// init canvas
	const canvas = document.querySelector('canvas');
	const ctx = canvas.getContext('2d');
	const canvasWidth = canvas.width = canvas.offsetWidth * 0.5;
	const canvasHeight = canvas.height = canvas.offsetHeight * 0.5;
	// init pen
	const nLayers = 80;
	const nPoints = 18;
	const zoom = 0.05;
	let p = 0;
	const vel = [];
	const layers = [];
	for (let i = 0; i < nLayers; ++i) {
		layers[i] = new Layer(nPoints);
		vel[i] = {
			x: 0,
			y: 0
		};
	}
	for (let i = 1; i < nLayers; ++i) {
		layers[i].transform(layers[i - 1]);
	}
	// main loop
	function run() {
		requestAnimationFrame(run);
		ctx.clearRect(0, 0, canvasWidth, canvasHeight);
		let k = nLayers - p;
		layers[k % nLayers].transform(layers[(k + 1) % nLayers])
		for (let i = 1; i < nLayers; ++i) {
			layers[++k % nLayers].draw(i + 1);
		}
		p = ++p % nLayers;
	}
	run();
}

编译

CSS

HTML

层峦叠嶂的动画特效

html5, mountain

编辑器支持Emmet

快捷键

层峦叠嶂的动画特效

html5, mountain

HTML5 Canvas可用鼠标拖拉的火把和烟雾动画

HTML5 Canvas点击屏幕碎裂交互动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：