canvas圆圈连线背景动画效果代码-html代码-BFW代码库

canvas圆圈连线背景动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas圆圈连线背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>html,body{overflow:hidden;height:100%;width:100%;background:#262b2e}#wrapper{height:100%;width:100%;text-align:center;display:table;position:absolute;}#title{display:table-cell;vertical-align:middle;z-index:999;}#title h2{color:#fff;font-size:45px;font-family:"museo-slab";}#title h3{color:#fff;font-size:25px;font-family:"museo-sans";font-weight:300}#wrapper canvas{position:absolute;top:0;left:0;width:100%;}#canvas{z-index:1;}#canvasbg{z-index:-10;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);filter:blur(3px);opacity:0.6;}</style>
</head>
<body>
<div id="wrapper">
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</div>
<script>
    var radMin = 5,
    radMax = 125,
    filledCircle = 60,
    concentricCircle = 30,
    radThreshold = 25;
var speedMin = 0.3,
    speedMax = 2.5;
var maxOpacity = 0.6;
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;
var linkDist = Math.min(canvas.width, canvas.height) / 2.4,
    lineBorder = 2.5;
var maxCircles = 12,
    points = [],
    pointsBack = [];
for (var i = 0; i < maxCircles * 2; i++) points.push(new Circle());
for (var i = 0; i < maxCircles; i++) pointsBack.push(new Circle(true));
var circleExp = 1,
    circleExpMax = 1.003,
    circleExpMin = 0.997,
    circleExpSp = 0.00004,
    circlePulse = false;

function Circle(background) {
    this.background = (background || false);
    this.x = randRange(-canvas.width / 2, canvas.width / 2);
    this.y = randRange(-canvas.height / 2, canvas.height / 2);
    this.radius = background ? hyperRange(radMin, radMax) * backgroundMlt : hyperRange(radMin, radMax);
    this.filled = this.radius < radThreshold ? (randint(0, 100) > filledCircle ? false : 'full') : (randint(0, 100) > concentricCircle ? false : 'concentric');
    this.color = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
    this.borderColor = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, .........完整代码请登录后点击上方下载按钮下载查看