canvas绘制彩色优美线条交错动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas绘制彩色优美线条交错动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background-color: #000000;
      color: #333333;
    }
    
    h4 {
      font-family: sans-serif;
      color: #333333;
      font-size: 16px;
    }
    
    h3 {
      font-family: sans-serif;
      color: #333333;
    }
    
    p {
      font-family: sans-serif;
      color: #333333;
      font-size: 14px;
    }
    
    #caption {
      position: absolute;
      width: 1024px;
      text-align: center;
      top: 520px;
      z-index: 1;
    }
    
    a {
      font-family: sans-serif;
      color: #d15423;
      text-decoration: none;
    }
    
    #displayCanvas {
      position: absolute;
      top: 10px;
      z-index: 0;
    }
    </style>

</head>

<body>

    <div id="container">
        <canvas id="displayCanvas" width="1024px" height="576px">
        Your browser does not support HTML5 canvas.
    </canvas>
        <form>
            <p id="caption">
                <input type="button" ,="" id="btnRegenerate" value="regenerate">
            </p>
        </form>
    </div>

    <script>
        window.addEventListener("load", windowLoadHandler, false);

//for debug messages while testing code
var Debugger = function() { };
Debugger.log = function(message) {
  try {
    console.log(message);
  }
  catch (exception) {
    return;
  }
};

function windowLoadHandler() {
  canvasApp();
}

function canvasApp() {
  var displayCanvas = document.getElementById("displayCanvas");
  displayCanvas.width = window.innerWidth;
  displayCanvas.height = Math.min(window.innerHeight, displayCanvas.height);
  var context = displayCanvas.getContext("2d");
  var displayWidth = displayCanvas.width;
  var displayHeight = displayCanvas.height;
  
  var btnRegenerate = document.getElementById("btnRegenerate");
  btnRegenerate.addEventListener("click", regeneratePressed, false);
  
  var numCircles;
  var maxMaxRad;
  var minMaxRad;
  var minRadFactor;
  var circles;
  var iterations;
  var numPoints;
  var timer;
  var drawsPerFrame;
  var drawCount;
  var bgColor,urlColor;
  var lineWidth;
  var colorParamArray;
  var colorArray;
  var dataLists;
  var minX, maxX, minY, maxY;
  var xSpace, ySpace;
  var lineNumber;
  var twistAmount;
  var fullTurn;
  var lineAlpha;
  var maxColorValue;
  var minColorValue;
  
  init();
  
  function init() {
    numCircles = 15;
    maxMaxRad = 200;
    minMaxRad = 200;
    minRadFactor = 0;
    iterations = 11;
    numPoints = Math.pow(2,iterations)+1;
    drawsPerFrame = 4;
    
    fullTurn = Math.PI*2*numPoints/(1+numPoints);
    
    minX = -maxMaxRad;
    maxX = displayWidth + maxMaxRad;
    minY = displayHeight/2-50;
    maxY = displayHeight/2+50;
    
    twistAmount = 0.67*Math.PI*2;
    
    stepsPerSegment = Math.floor(800/numCircles);
    
    maxColorValue = 100;
    minColorValue = 20;
    lineAlpha = 0.15;
    
    bgColor = "#000000";
    urlColor = "#333333";
    
    lineWidth = 1.01;
    
    startGenerate();
  }
    
  function startGenerate() {
    drawCount = 0;
    context.setTransform(1,0,0,1,0,0);
    
    context.clearRect(0,0,displayWidth,displayHeight);
    
    setCircles();
    
    colorArray = setColorList(iterations);
        
    lineNumber = 0;
    
    if(timer) {clearInterval(timer);}
    timer = setInterval(onTimer,1000/60);
    
  }
  
  function setColorList(iter) {
    var r0,g0,b0;
    var r1,g1,b1;
    var r2,g2,b2;
    var param;
    var colorArray;
    var lastColorObject;
    var i, len;
    
    var maxComponentDistance = 32;
    var maxComponentFactor = 0.5;
    
    
    r0 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    g0 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    b0 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    
    r1 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    g1 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    b1 = minColorValue + Math.random()*(maxColorValue-minColorValue);
    
    
    /*
    //can also set colors explicitly here if you like.
    r1 = 90;
    g1 = 60;
    b1 = 20;
    
    r0 = 30;
    g0 = 77;
    b0 = 66;
    */
    
    a = lineAlpha;
    
    var colorParamArray = setLinePoints(iter);
    colorArray = [];
    
    len = colorParamArray.length;
    
    for (i = 0; i < len; i++) {
      param = colorParamArray[i];
      
      r = Math.floor(r0 + param*(r1 - r0));
      g = Math.floor(g0 + param*(g1 - g0));
      b = Math.floor(b0 + param*(b1 - b0));
        
      var newColor = "rgba("+r+","+g+","+b+","+a+")";
      
      colorArray.push(newColor);
    }
    
    return colorArray;
    
  .........完整代码请登录后点击上方下载按钮下载查看