【实例简介】html5 canvas绘制随机游动线条动画特效

【实例截图】

【核心代码】

html5 canvas绘制随机游动线条动画特效

canvas.drawer {

position:fixed;

top:0px;

left:0px;

width:100vw;

height:100vh;

}

'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;

};