當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

打开就随机生长的树

發布時間：2023/12/2 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了打开就随机生长的树小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天接觸了一個新東西，感覺很酷炫的樣子。
不是我寫的，拿給大家看一看，喜歡的可以直接拿走不謝。
樹的形狀和樹枝多少都是隨機的，每刷新一次就有一次的驚喜哦，無聊的親們可以多刷幾次，當動畫來看哦。
2017年又一天一天的走完了，2018都已經過去三十多天了。我每天都新建一個文件夾，這個文件夾里便是這一天的時光。可能在別人看來乏味而枯燥，但我竟然覺得這感覺相當不錯。
臨近年關，卻沒有要過年的感覺。估計是因為身在異鄉，身邊沒有親朋友人，便總是覺得冷清了一些。
所以就敲代碼吧。
html 代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>

總結

以上是生活随笔為你收集整理的打开就随机生长的树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

生长