首页 /  web前端 /  html5 /  canvas / 疯狂的小树

0 26

疯狂的小树

纯css3实现


html5 canvas


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>疯狂的小树</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    const W = canvas.width = 900
    const H = canvas.height = 700

    canvas.style.border = '8px solid #000'

    // rp([1, 3])  ==>  1 | 2 | 3
    // rp([3, 1], true)  ==> 1 - 3 之间随机的小数
    const rp = function (arr, uint){
      const min = Math.min(...arr)
      const max = Math.max(...arr)
      const ret = Math.random() * (max - min) + min
      return uint ? ret : Math.round(ret)
    }

    const maxBranch = 3

    tree(ctx, W/2, H/2 + 200, 70, -Math.PI/2, 14, 20)

    function tree(ctx, startX, startY, branchLen, angle, depth, branchWidth) {
      const endX = startX + branchLen * Math.cos(angle)
      const endY = startY + branchLen * Math.sin(angle)

      const color = (depth--) < maxBranch - 1 ? `rgb(0, ${rp([128, 196])}, 0)` : 'rgb(68, 50, 25)'

      ctx.save()
      ctx.lineCap = 'round'
      ctx.lineWidth = branchWidth
      ctx.strokeStyle = color
      ctx.beginPath()
      ctx.moveTo(startX, startY)
      ctx.lineTo(endX, endY)
      ctx.stroke()
      ctx.restore()

      if (!depth) return

      const subBranches = rp([1, maxBranch])

      for (let i=0; i<subBranches; i++) {
        setTimeout(
          tree, 
          0, 
          ctx, 
          endX, 
          endY,
          branchLen * rp([0.7, 1], true),
          angle + rp([-Math.PI/5, Math.PI/5], true),
          depth,
          branchWidth * 0.72
        )
      }
    }
  </script>
</body>
</html>
   转自前端网


[来源] https://www.qdfuns.com

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
容若 2019-09-04 13:25
10
送花
20积分一朵