实例介绍
【实例截图】
【核心代码】
<!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;
};
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论