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

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

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

var w = window.innerWidth;
var h = window.innerHeight;
var ctx = document.getElementById('canvas');

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

function resize() {
	ctx.width = w = window.innerWidth;
	ctx.height = h = window.innerHeight;
}

resize();

let ctxfr = ctx.getContext('2d');

// min and max radius, radius threshold and percentage of filled circles
var radMin = 5,
	radMax = 125,
	filledCircle = 60, //percentage of filled circles
	concentricCircle = 30, //percentage of concentric circles
	radThreshold = 25; //IFF special, over this radius concentric, otherwise filled

//min and max speed to move
var speedMin = 0.3,
	speedMax = 2.5;

//max reachable opacity for every circle and blur effect
var maxOpacity = 0.6;

//default palette choice
var colors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
	bgColors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
	circleBorder = 10,
	backgroundLine = bgColors[0];
var backgroundMlt = 0.85;

//min distance for links
var linkDist = Math.min(canvas.width, canvas.height) / 2.4,
	lineBorder = 2.5;

//most importantly: number of overall circles and arrays containing them
var maxCircles = 12,
	points = [],
	pointsBack = [];

//populating the screen
for (var i = 0; i < maxCircles * 2; i++) points.push(new Circle());
for (var i = 0; i < maxCircles; i++) pointsBack.push(new Circle(true));

//experimental vars
var circleExp = 1,
	circleExpMax = 1.003,
	circleExpMin = 0.997,
	circleExpSp = 0.00004,
	circlePulse = false;

//circle class
function Circle(background) {
	//if background, it has different rules