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

代码语言：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, colors.length - 1)];
    this.opacity = 0.05;
    this.speed = (background ? randRange(speedMin, speedMax) / backgroundMlt : randRange(speedMin, speedMax));
    this.speedAngle = Math.random() * 2 * Math.PI;
    this.speedx = Math.cos(this.speedAngle) * this.speed;
    this.speedy = Math.sin(this.speedAngle) * this.speed;
    var spacex = Math.abs((this.x - (this.speedx < 0 ? -1 : 1) * (canvas.width / 2 + this.radius)) / this.speedx),
        spacey = Math.abs((this.y - (this.speedy < 0 ? -1 : 1) * (canvas.height / 2 + this.radius)) / this.speedy);
    this.ttl = Math.min(spacex, spacey);
};
Circle.prototype.init = function() {
    Circle.call(this, this.background);
}

function randint(a, b) {
    return Math.floor(Math.random() * (b - a + 1) + a);
}

function randRange(a, b) {
    return Math.random() * (b - a) + a;
}

function hyperRange(a, b) {
    return Math.random() * Math.random() * Math.random() * (b - a) + a;
}

function drawCircle(ctx, circle) {
    var radius = circle.background ? circle.radius *= circleExp : circle.radius /= circleExp;
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, radius * circleExp, 0, 2 * Math.PI, false);
    ctx.lineWidth = Math.max(1, circleBorder * (radMin - circle.radius) / (radMin - radMax));
    ctx.strokeStyle = ['rgba(', circle.borderColor, ',&#.........完整代码请登录后点击上方下载按钮下载查看