打开就随机生长的树
打开就随机生长的树
今天接触了一个新东西，感觉很酷炫的样子。
不是我写的，拿给大家看一看，喜欢的可以直接拿走不谢。
树的形状和树枝多少都是随机的，每刷新一次就有一次的惊喜哦，无聊的亲们可以多刷几次，当动画来看哦。
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>