H5动画制作 Web前端开发_打开就随机生长的树

h5动画制作 web前端开发|前端开发者

HTML5

树的形状和树枝多少都是随机的,每刷新一次就有一次的惊喜哦。
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>h5动画制作 web前端开发</title>
</head>
<body>
<canvasid=”canvas”></canvas>
<script>
constcanvas=document.getElementById(‘canvas’)
constctx=canvas.getContext(‘2d’)
constW=canvas.width =900
constH=canvas.height =700
canvas.style.border =’8px solid #000′
// rp([1, 3]) ==> 1 | 2 | 3
// rp([3, 1], true) ==> 1 – 3 之间随机的小数
constrp=function(arr,uint){
constmin=Math.min(…arr)
constmax=Math.max(…arr)
constret=Math.random() * (max-min) +min
returnuint?ret:Math.round(ret)
}
constmaxBranch=3
tree(ctx,W/2,H/2+200,70,-Math.PI/2,14,20)
functiontree(ctx,startX,startY,branchLen,angle,depth,branchWidth){
constendX=startX+branchLen*Math.cos(angle)
constendY=startY+branchLen*Math.sin(angle)
constcolor= (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
constsubBranches=rp([1,maxBranch])
for (leti=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.rokub.com

» 本文来自:前端开发者 » 《H5动画制作 Web前端开发_打开就随机生长的树》
» 本文链接地址:https://www.rokub.com/2744.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!