canvas实现可交互水墨风格树叶树木生长动画效果代码-html代码-BFW代码库

canvas实现可交互水墨风格树叶树木生长动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现可交互水墨风格树叶树木生长动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url(https://fonts.googleapis.com/css?family=Poiret+One);
html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}
body {
	position: absolute;
	margin: 0;
	padding: 0;
	background: #111;
	width: 100%;
	height: 100%;
}
#canvas {
	width: 100%; 
	height: 100%;
	background: #fff;
	position: absolute;
}
#text {
	position:absolute;
	left:0;
	bottom:10px;
	width:100%;
	pointer-events:  none;
}

#text div {
	position:absolute;
	color:#888;
	left:0;
	width:100%;
	text-align:center;
	top:-32px;
	font-family: 'Poiret One', cursive;
	font-size:32px;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<div id="text">
	<div id="clic" nowrap>this pen is mouse/touch interactive</div>
</div>
<!-- partial -->
  <script >
      ! function () {

	"use strict";

	// branch constructor

	function Branch (parent, level, x, y) {

		this.parent = parent;
		this.branches = [];
		this.p0 = parent ? parent.p1 : new Point(x, y);
		this.p1 = new Point(x, y);
		this.level = level;
		this.life = 20;
		this.angle = 0;
		this.vx = 0;
		this.vy = 0;

	}

	// grow branch

	Branch.prototype.grow = function () {

		// recursively grow children branches

		for (var i = 0; i < this.branches.length; i++) {

			this.branches[i].grow();

		}

		// grow branch

		if (this.life > 1) {

			this.p1.x += this.vx;
			this.p1.y += this.vy;

			ctx.beginPath();
			ctx.lineCap = "round";

			if (this.level) {

				// draw branch

				ctx.lineWidth = this.level * .5;
				ctx.strokeStyle = "grey";

				if (this.parent) {

					ctx.moveTo(this.parent.p0.x, this.parent.p0.y);
					ctx.quadraticCurveTo(this.p0.x, this.p0.y, this.p1.x, this.p1.y);

				}

				ctx.stroke();

			} else {

				// draw leaf

				ctx.lineWidth = 1;
				ctx.strokeStyle = "#f40";
				ctx.moveTo(this.p0.x, this.p0.y);
				ctx.lineTo(this.p1.x, this.p1.y);
				ctx.stroke();

			}
		}

		// create sub branches

		if (this.life === 1 && this.level > 0 && this.level < maxLevels) {

			this.branches.push(newBranch(this));
			this.branches.push(newBranch(this));

		}

		// decrement branch life

		this.life--;

	}

	// point 2D constructor

	function Point (x, y) {

		this.x = x;
		this.y = y;

	}

	// new branch factory

	function newBranch (parent) {

		var branch = new Branch (parent, parent.level - 1, parent.p1.x, parent.p1.y);

		branch.angle = (autorun && parent.level === maxLevels) ? Math.random() * 2 * Math.PI : Math.atan2(
			parent.p1.y - parent.p0.y, 
			parent.p1.x - parent.p0.x 
		) + (Math.random() * 1.4 - 0.7);

		branch.vx = Math.cos(branch.angle) * 12;
		branch.vy = Math.sin(branch.angle) * 12;

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