zdog实现一个可拖动旋转的树枝树干效果代码-html代码-BFW代码库

zdog实现一个可拖动旋转的树枝树干效果代码

代码语言：html

所属分类：其他

代码描述：zdog实现一个可拖动旋转的树枝树干效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.zdog-canvas {
  background: #DFF;
}
</style>



</head>

<body>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<canvas class="zdog-canvas" width="750" height="750"></canvas>


  
      <script>
let isSpinning = false;

// create illo
let illo = new Zdog.Illustration({
  // set canvas with selector
  element: '.zdog-canvas',
  dragRotate: true,

  onDragStart: function () {
    isSpinning = false;
  } });


//initialWidth controls size of tree, but larger trees (above 15?) would
//    benefit from a kill branches effect
//branchAngle should be between 8 and 14
//angleLimit looks best between 50 and 100, depending on circumstances
//    consider making angleMin and angleMax separate numbers for lopsided trees
//wiggleMax
//wiggleAmount should be between 6 and 15
function drawTree(initialWidth, branchAngle, angleLimit, wiggleMax, wiggleAmount) {
  let tree = [];
  let branches = [];
  //Initial branch
  branches.push({ x: 0, y: 150, t: 0, w: initialWidth }); //x, y, theta & width

  while (branches.length > 0) {
    branches = branches.concat(processBranch(branches.shift(), initialWidth, branchAngle, angleLimit, wiggleMax, wiggleAmount, tree));
  }
  tree.sort(function (a, b) {
    return b.w - a.w;
  });
  tree.forEach(function (e) {
    //console.log(e);
    drawBranch(e);
  });
}
function processBranch(b, originalWidth, branchingAngle, maxAngle, maxWiggleAngle, wiggleAngle, tree) {
  let wiggleCount = Math.floor(Math.random() * ((maxWiggleAngle + b.w) * 3 / 4)) + 3;
  let initAngle = b.t;
  let totalLength = b.w * 4;
  let length = totalLength * (1 + (originalWidth - b.w + 1) / 5) / wiggleCount;
  let x = b.x;
  let y = b.y;
  let oldX = x;
  let oldY = y;
  let angle = initAngle;
  let wiggleSwitch = Math.random() < 0.5;
  let newBranches = [];

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