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.s.........完整代码请登录后点击上方下载按钮下载查看