使用css与js生成的唯美炫酷的图形树效果

互联网   02-09 16:12:30   作者:佚名   我要评论

这篇文章给大家分享一个使用css与js生成的唯美炫酷的图形树效果,具体实例代码大家参考下本文

效果图如下所示:

在线演示:Here~

给大家分享一个使用css与js生成的唯美炫酷的图形树效果,相关代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cloth</title>
  <style>
    @import url(http://fonts.googleapis.com/css?family=Poiret+One);
html {
  overflow: hidden;
  touch-action: none;
  content-zooming: none;
}
body {
  position: absolute;
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
}
#canvas {
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
}
#text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  pointer-events: none;
}
#text div {
  position: absolute;
  color: #888;
  left: 0;
  width: 100%;
  text-align: center;
  top: -12vmin;
  font-family: 'Poiret One', cursive;
  font-size: 6vmin;
}   
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
<div id="text">
  <div id="clic" nowrap>
</div>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
  <script>
    ! function() {
  "use strict";
  // variables
  var root = null;
  var hue = 0;
  var automove = true;
  var angleX = 0;
  var angleY = 0;
  /////////////////////////
  var resolution = 1;
  var maxLevels = 6;
  var branchLength = 10 * resolution;
  var leafSize = 100;
  var growSpeed = 2;
  var maxAngle = 1.2;
  var freq = 0.3;
  /////////////////////////
  // branch constructor
  function Branch(parent, level, hue, x, y) {
    this.parent = parent;
    this.b1 = null;
    this.b2 = null;
    this.b3 = null;
    this.hue = hue;
    this.p0 = parent ? parent.p1 : new Point(x, y, 0);
    this.p1 = new Point(
      x,
      y,
      parent === root ?
      0 :
      (
        parent ?
        parent.p1.z + (
          level ?
          Math.random() * 10 - 5 :
          0
        ) :
        0
      )
    );
    this.level = level;
    this.life = 0;
    this.angle = 0;
    this.vx = 0;
    this.vy = 0;
  }
  // grow branch
  Branch.prototype.grow = function() {
    // z move
    this.p1.z--;
    // 3D projection
    this.p1.project();
    // recursively grow children branches
    this.b1 && this.b1.grow();
    this.b2 && this.b2.grow();
    // grow
    if (this.life-- > 1) {
      this.p1.x += this.vx;
      this.p1.y += this.vy;
    }
    // done - push more children branches
    if (this.life === 1 && this.level > 0) {
      this.b1 = newBranch(this);
      if (Math.random() <= freq) this.b2 = newBranch(this);
      this.life--;
    }
    // cut the tree
    if (this.p0.z <= -250) {
      this.parent = null;
    }
    // draw the branch 
    var width = resolution * (this.level === 1 ?
      1 :
      ((this.level + 1) * (this.level + 1)) * 0.5 * this.p1.scale
    );
    var color = 100 - Math.abs(this.p0.z * 0.5);
    ctx.beginPath();
    if (this.level) {
      ctx.lineWidth = width;
      ctx.strokeStyle = "hsl(" + (this.hue % 360) + ", 14%," + color + "%)";
      ctx.moveTo(this.p0.xp, this.p0.yp);
      ctx.lineTo(this.p1.xp, this.p1.yp);
      ctx.stroke();
    } else {
      ctx.globalCompositeOperation = "lighter";
      var c = ((this.hue + 180) % 360);
      ctx.fillStyle = "hsl(" + c + ", 100%, 70%)";
      ctx.arc(this.p1.xp, this.p1.yp, width * leafSize * 0.1, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.fillStyle = "hsl(" + c + ", 60%, 6%)";
      ctx.arc(this.p1.xp, this.p1.yp, width * leafSize, 0, Math.PI * 2);
      ctx.fill();
      ctx.globalCompositeOperation = "source-over";
    }
  }
  // 3D point constructor
  function Point(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.scale = 0;
    this.xp = 0;
    this.yp = 0;
  }
  // 3D point projection
  Point.prototype.project = function() {
    this.scale = 265 / (265 + this.z);
    this.xp = canvas.centerX + (this.x - canvas.centerX) * this.scale;
    this.yp = canvas.centerY + (this.y - canvas.centerY) * this.scale;
  }
  // new branch factory
  function newBranch(parent) {
    var branch = new Branch(parent, parent.level - 1, hue, parent.p1.x, parent.p1.y);
    branch.angle = Math.atan2(
      parent.p1.y - parent.p0.y,
      parent.p1.x - parent.p0.x
    ) + (branch.level ?
      (Math.random() * maxAngle - (maxAngle * 0.5)) :
      0
    );
    branch.vx = Math.cos(branch.angle) * growSpeed;
    branch.vy = Math.sin(branch.angle) * growSpeed;
    branch.life = branch.level ?
      Math.round(Math.random() * branch.level * branchLength) + 1 :
      2;
    return branch;
  }
  // animate the tree
  function tree() {
    // clear screen
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // pointer trail
    if (pointer.moveDistance > 10 * resolution) {
      pointer.moveDistanc