canvas 波浪

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

'use strict';

var gui = new dat.GUI(),
    guiSet = {
	frequency: 10,
	reset: function reset() {
		$.reset();
	}
};
gui.add(guiSet, 'frequency').min(10).max(50);
gui.add(guiSet, 'reset');

var $ = {};

/*========================================
Utility
========================================*/

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

$.rand = function (min, max) {
	if (!max) {
		var max = min;
		min = 0;
	}

return Math.random() * (max - min) + min;
};

/*========================================
Initialize
========================================*/

$.init = function () {
	$.c = document.querySelector('canvas');
	$.ctx = $.c.getContext('2d');
	$.simplex = new SimplexNoise();
	$.events();
	$.reset();
	$.loop();
};

/*========================================
Reset
========================================*/

$.reset = function () {
	$.w = window.innerWidth;
	$.h = window.innerHeight;
	$.cx = $.w / 2;
	$.cy = $.h / 2;
	$.c.width = $.w;
	$.c.height = $.h;

$.count = Math.floor($.w / guiSet.frequency); // Wave frequency
	$.xoff = 0;
	$.xinc = 0.05;
	$.yoff = 0;
	$.yinc = 0.01; // Speed
	$.goff = 0;
	$.ginc = 0;
	$.y = $.h * 0.65;
	$.length = $.w + 0;
	$.amp = 15; // Wave height
};

/*========================================
Event
========================================*/

$.events = function () {
	window.addEventListener('resize', $.reset.bind(undefined));
};

/*========================================
Wave
========================================*/

$.wave = function (color, amp, height, comp) {
	$.ctx.beginPath();
	var sway = $.simplex.noise2D($.goff, 0) * amp;

for (var i = 0; i <= $.count; i++) {
		$.xoff += $.xinc;
		var x = $.cx - $.length / 2 + $.length / $.count * i;
		var y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
		$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
	}

$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
	$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
	$.ctx.closePath();
	$.ctx.fillStyle = color;

if (comp) {
		$.ctx.globalCompositeOperation = comp;
	}

$.ctx.fill();
};

/*========================================
Loop
========================================*/

$.loop = function () {
	requestAnimationFrame($.loop);

$.ctx.clearRect(0, 0, $.w, $.h);
	$.xoff = 0;

$.ctx.fillStyle = "#182645";
	$.ctx.fillRect(0, 0, $.w, $.h);

$.wave("#fb0000", 20, $.h * .5, "screen");
	$.wave("#00ff8e", 20, $.h * .5, "screen");
	$.wave("#6F33FF", 20, $.h * .5, "screen");

$.ctx.fillStyle = "#f1dfdd";

$.ctx.globalCompositeOperation = "darken";

$.ctx.fillRect(0, 0, $.w, $.h);

$.yoff += $.yinc;
	$.goff += $.ginc;
};

/*========================================
Start
========================================*/

$.init();

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