Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wunderschöner grafischer Baum, implementiert mit CSS und JS

小云云
Freigeben: 2018-02-11 10:00:48
Original
2160 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen hauptsächlich Beispiele für schöne Grafikbäume, die in CSS und JS implementiert sind. Ich hoffe, er kann Ihnen helfen.

Ich möchte mit Ihnen einen schönen und coolen grafischen Baumeffekt teilen, der mit CSS und JS generiert wurde. Der relevante Code lautet wie folgt:


<!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 p {
  position: absolute;
  color: #888;
  left: 0;
  width: 100%;
  text-align: center;
  top: -12vmin;
  font-family: &#39;Poiret One&#39;, cursive;
  font-size: 6vmin;
}   
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
<p id="text">
  <p id="clic" nowrap>
</p>
<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 = &#39;#000&#39;;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // pointer trail
    if (pointer.moveDistance > 10 * resolution) {
      pointer.moveDistance = 0;
      // main trunk
      var branch = new Branch(
        root,
        root.level,
        hue,
        root.p1.x,
               root.p1.y
      );
      // add another branch
      if (Math.random() <= freq) root.b1 = newBranch(root);
      // new root
      root = branch;
      root.p1.x = pointer.x;
      root.p1.y = pointer.y;
    }
    // increment color
    hue++;
    // traverse the tree
    var trunk = root;
    while (trunk) {
      trunk.grow();
      trunk = trunk.parent;
    }
  }
  // prepare the canvas
  var canvas = {
    elem: document.getElementById(&#39;canvas&#39;),
    resize: function() {
      this.width = this.elem.width = this.elem.offsetWidth * resolution;
      this.height = this.elem.height = this.elem.offsetHeight * resolution;
      this.centerX = this.width * 0.5;
      this.centerY = this.height * 0.5;
    }
  }
  var ctx = canvas.elem.getContext("2d");
  window.addEventListener(&#39;resize&#39;, canvas.resize.bind(canvas), false);
  canvas.resize();
  // pointer events
  var pointer = {
    x: 0,
    y: 0,
    px: 0,
    py: 0,
    moveDistance: 0,
    move: function(e) {
      e.preventDefault();
      var pointer = e.targetTouches ? e.targetTouches[0] : e;
      // stop automove
      if (automove) {
        automove = false;
        document.getElementById("clic").innerHTML = "";
      }
      this.x = pointer.clientX * resolution;
      this.y = pointer.clientY * resolution;
      this.distance();
      // render tree
      requestAnimationFrame(tree);
    },
    distance: function() {
      var dx = this.x - this.px;
      var dy = this.y - this.py;
      this.moveDistance += Math.sqrt(dx * dx + dy * dy);
      // speed limit
      if (!automove && this.moveDistance > 40) {
        this.x = this.px + dx * 0.1;
        this.y = this.py + dy * 0.1;
      }
      this.px = this.x;
      this.py = this.y;
    }
  }
  window.addEventListener("mousemove", pointer.move.bind(pointer), false);
  canvas.elem.addEventListener("touchmove", pointer.move.bind(pointer), false);
  // auto start
  ! function auto() {
    automove && requestAnimationFrame(auto);
    // lissajou
    pointer.x = canvas.centerX + canvas.centerX * Math.cos(angleX += 0.02) * 0.20;
    pointer.y = canvas.centerY + canvas.centerY * Math.sin(angleY += 0.04) * 0.25;
    pointer.distance();
    // create the first branch
    if (!root) {
      root = new Branch(false, maxLevels, hue, pointer.x, pointer.y);
      root.p0 = root.p1;
      root.p0.project();
    }
    // render tree
    tree();
  }();
}();
  </script>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWunderschöner grafischer Baum, implementiert mit CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage