jquery实现canvas梦幻树生长动画效果代码-html代码-BFW代码库

jquery实现canvas梦幻树生长动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现canvas梦幻树生长动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
(function ($) {

	var Vector = function (x, y) {

		this.x = x || 0;

		this.y = y || 0;

	};

	Vector.prototype = {

		add: function (v) {

			this.x += v.x;

			this.y += v.y;

			return this;

		},

		length: function () {

			return Math.sqrt(this.x * this.x + this.y * this.y);

		},

		rotate: function (theta) {

			var x = this.x;

			var y = this.y;

			this.x = Math.cos(theta) * this.x - Math.sin(theta) * this.y;

			this.y = Math.sin(theta) * this.x + Math.cos(theta) * this.y;

			//this.x = Math.cos(theta) * x - Math.sin(theta) * y;

			//this.y = Math.sin(theta) * x + Math.cos(theta) * y;

			return this;

		},

		mult: function (f) {

			this.x *= f;

			this.y *= f;

			return this;

		}

	};



	var Leaf = function (p, r, c, ctx) {

		this.p = p || null;

		this.r = r || 0;

		this.c = c || 'rgba(255,255,255,1.0)';

		this.ctx = ctx;

	}



	Leaf.prototype = {

		render: function () {

			var that = this;

			var ctx = this.ctx;

			var f = Branch.random(1, 2)

			for (var i = 0; i < 5; i++) {

				(function (r) {

					setTimeout(function () {

						ctx.beginPath();

						ctx.fillStyle = that.color;

						ctx.moveTo(that.p.x, that.p.y);

						ctx.arc(that.p.x, that.p.y, r, 0, Branch.circle, true);

						ctx.fill();

					}, r * 60);

				})(i);

			}

		}

	}





	var Branch = function (p, v, r, c, t) {

		this.p = p || null;

		this.v = v || null;

		this.r = r || 0;

		this.length = 0;

		this.generation = 1;

		this.tree = t || null;

		this.color = c || 'rgba(255,255,255,1.0)';

		this.register();

	};



	Branch.prototype = {

		register: function () {

			this.tree.addBranch(this);

		},

		draw: function () {

			var ctx = this.tree.ctx;

			ctx.beginPath();

			ctx.fillStyle = this.color;

			ctx.moveTo(this.p.x, this.p.y);

			ctx.arc(this.p.x, this.p.y, this.r, 0, Branch.circle, true);

			ctx.fill();

		},

		modify: function () {

			var angle = 0.18 - (0.10 / this.generation);

			this.p.add(this.v);

			this.length += this.v.length();

			this.r *= 0.99;

			this.v.rotate(Branch.random(-angle, angle)); //.mult(0.996);

			if (this.r < 0.8 || this.generation > 10) {

				this.tree.removeBranch(this);

				var l = new Leaf(this.p, 10, this.color, this.tree.ctx);

				l.render();

			}

		},

		grow: function () {

			this.draw();

			this.modify();

			this.fork();

		},

		fork: function () {

			var p = this.length - Branch.random(100, 200); // + (this.generation * 10);

			if (p > 0) {

				var n = Math.round(Branch.random(1, 3));

				this.tree.stat.fork += n - 1;

				for (var i = 0; i < n; i++) {

					Bran.........完整代码请登录后点击上方下载按钮下载查看