基本信息
源码名称：html5 canvas绘制随机游动线条动画特效
源码大小：7.85KB
文件格式：.zip
开发语言：CSS
更新时间：2019-10-10
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
html5 canvas绘制随机游动线条动画特效

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>html5 canvas绘制随机游动线条动画特效</title> 
  <style>
canvas.drawer {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
}
</style> 
 </head> 
 <body> 
  <div></div> 
  <script>
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i ) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var initialise = function initialise() {
  var application = new Application();
  // application.scaleFactor = 2;
  application.clearOnRedraw = Application.FADE;
  application.fadeColour = 'rgba(0,0,0,.03)';
  application.fillColour = 'rgba(30,30,30,1)';
  application.onResize();
  var vfield = new VectorField();
  vfield.scale = 300;
  vfield.amplitude = 40;
  // vfield.debug = true;

  application.addActor(vfield);

  var maxNum = 1000;
  var num = 0;

  var addTracer = function addTracer(position, colour) {
    if (num > maxNum) return;

    num ;

    var tracer = new BranchTracer(position.x, position.y);
    tracer.field = vfield;
    var momentum = new Vector(Math.random(), Math.random());
    momentum.length = Math.random() * 2;
    tracer.momentum = momentum;
    tracer.friction = 0.97;

    if (colour) {
      tracer.colour = colour;
    } else {
      tracer.colour = 'RGBA(' Math.round(Math.random() * 255) ',' 100 Math.round(Math.random() * 155) ',255,0.2)';
    }

    application.addActor(tracer);
    return tracer;
  };
  var seed = addTracer(new Vector(window.innerWidth / 2, window.innerHeight / 2), 'RGBA(255, 100, 100, 0.8)');
  seed.branchChance = 5;
  seed.friction = 0.985;
  seed.onBranch = addTracer;

  setInterval(function () {
    vfield.z = Math.random() * 10000;
  }, 10000);

  var stage = application.stage;
  document.body.appendChild(stage);
  application.onPointerMove({ clientX: window.innerWidth / 2, clientY: window.innerHeight / 2 });
  application.render();
  application.animating = true;

  // application.runFor(60 * 120);

  return;
};