HTML5画布树分形

最新推荐文章于 2023-06-16 14:15:57 发布

limeiyans

最新推荐文章于 2023-06-16 14:15:57 发布

阅读量1.2k

点赞数

分类专栏： HTML5画布树分形文章标签： HTML5画布树分形

本文链接：https://blog.csdn.net/limeiyans/article/details/18458151

版权

HTML5画布树分形专栏收录该内容

0 篇文章 0 订阅

订阅专栏

说明:刷新页面来查看不同的随机树

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
    <script>
      function drawBranches(startX, startY, trunkWidth, level) {
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext('2d');
        if(level < 12) {
          var changeX = 100 / (level + 1);
          var changeY = 200 / (level + 1);

          var topRightX = startX + Math.random() * changeX;
          var topRightY = startY - Math.random() * changeY;

          var topLeftX = startX - Math.random() * changeX;
          var topLeftY = startY - Math.random() * changeY;

          // draw right branch
          context.beginPath();
          context.moveTo(startX + trunkWidth / 4, startY);
          context.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth, topRightX, topRightY);
          context.lineWidth = trunkWidth;
          context.lineCap = 'round';
          context.stroke();

          // draw left branch
          context.beginPath();
          context.moveTo(startX - trunkWidth / 4, startY);
          context.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth, topLeftX, topLeftY);
          context.lineWidth = trunkWidth;
          context.lineCap = 'round';
          context.stroke();

          drawBranches(topRightX, topRightY, trunkWidth * 0.7, level + 1);
          drawBranches(topLeftX, topLeftY, trunkWidth * 0.7, level + 1);
        }
      }
      canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');
      drawBranches(canvas.width / 2, canvas.height, 50, 0);

    </script>
  </body>
</html>