vector实现粒子线条绘制canvas动画效果代码-html代码-BFW代码库

vector实现粒子线条绘制canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：vector实现粒子线条绘制canvas动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html,
body {
  margin: 0;
}
body {
  overflow: hidden;
}
canvas {
  position: absolute;
}
</style>
</head>

<body>
    <canvas id="canvas-bottom"></canvas>
    <canvas id="canvas-top"></canvas>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vector.js"></script>
    <script>
        (function(){
  'use strict';
  // Configuration options
  var opts = {
    background: 'black',
    numberOrbs: 100, // increase with screen size.  50 to 100 for my 2560 x 1400 monitor
    maxVelocity: 2.5, // increase with screen size--dramatically affects line density.  2-3 for me
    orbRadius: 1, // keep small unless you really want to see the dots bouncing. I like <= 1.
    minProximity: 100, // controls how close dots have to come to each other before lines are traced
    initialColorAngle: 7, // initialize the color angle, default = 7
    colorFrequency: 0.3, // 0.3 default
    colorAngleIncrement: 0.009, // 0.009 is slow and even
    globalAlpha: 0.010, //controls alpha for lines, but not dots (despite the name)
    manualWidth: false, // Default: false, change to your own custom width to override width = window.innerWidth.  Yes i know I'm mixing types .........完整代码请登录后点击上方下载按钮下载查看