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;
};
评论