src/main/webapp/front/js/canvas-bg-web-1.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

window.requestAnimFrame = (function() {
	return window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
})();
var c = document.getElementById('canvas');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var _w = w * 0.5;
var _h = h * 0.5;
var arr = [];
var cnt = 0;

window.addEventListener('load', resize);
window.addEventListener('resize', resize, false);

function resize() {
	c.width = w = window.innerWidth;
	c.height = h = window.innerHeight;
	c.style.position = 'absolute';
	c.style.left = (window.innerWidth - w) *
		.01 + 'px';
	c.style.top = (window.innerHeight - h) *
		.01 + 'px';
}

function anim() {
	cnt++;
	if (cnt % 6) draw();
	window.requestAnimFrame(anim);
}
anim();

function draw() {
	var splot = {
		x: rng(_w - 900, _w + 900),
		y: rng(_h - 900, _h + 900),
		r: rng(20, 80),
		spX: rng(-1, 1),
		spY: rng(-1, 1)
	};

	arr.push(splot);
	while (arr.length > 100) {
		arr.shift();
	}
	$.clearRect(0, 0, w, h);

	for (var i = 0; i < arr.length; i++) {

		splot = arr[i];;
		$.fillStyle = rndCol();
		$.beginPath();
		$.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);