css和js实现的好看的图形树-css教程-PHP中文网

首页

web前端

css教程

css和js实现的好看的图形树

小云云

Feb 11, 2018 am 10:00 AM

cssjavascript

本文主要和大家分享css和js实现的好看的图形树实例，希望能帮助到大家。

给大家分享一个使用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 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>

以上是css和js实现的好看的图形树的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自从我第一次介绍了CSS4面中的事情以来，就已经进行了更多的讨论。我将在这里从其他人那里汇集我最喜欢的想法。有

三种代码Apr 11, 2025 pm 12:02 PM

每次启动一个新项目时，我都会将我正在查看的代码分为三种类型，或者如果您愿意的话。我认为这些类型可以应用于

https很容易！Apr 11, 2025 am 11:51 AM

我对公开哀悼HTTPS的复杂性感到内gui。过去，我从第三方供应商那里购买了SSL证书，并且遇到了麻烦

HTML数据属性指南Apr 11, 2025 am 11:50 AM

您想了解的有关HTML，CSS和JavaScript中数据属性的所有信息。

了解JavaScript中的不变性Apr 11, 2025 am 11:47 AM

如果您以前从未在JavaScript中使用不变性，则可能会发现很容易将其与为新值或重新分配分配变量的混淆。

具有现代CSS功能的定制样式表单输入Apr 11, 2025 am 11:45 AM

如今，可以在语义上且易于访问的同时构建自定义的复选框，无线电按钮和切换开关。我们甚至不需要

脚注字符Apr 11, 2025 am 11:34 AM

有特殊的超级数字字符有时非常适合脚注。他们在这里：

如何使用HTML，CSS和JavaScript创建动画倒计时计时器Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

WebStorm Mac版

好用的JavaScript开发工具

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

VSCode Windows 64位下载

微软推出的免费、功能强大的一款IDE编辑器

Atom编辑器mac版下载

最流行的的开源编辑器

显示更多

css和js实现的好看的图形树