<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>H5下迭代生成樹</title>
<style>
body
{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p style="float: left;margin-left: 300px;margin-top:100px;font-size: 30px;font-style: oblique;">這是一棵灌木</p>
<canvas id="myCanvas" width="600" height="500"style="float:left;border:1px solid black"></canvas>
<script>
function drawBranches(startX, startY, trunkWidth, level) {
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
if(level < 15) {
var cX = 100 / (level + 1);
var cY = 200 / (level + 1);
var topRightX = startX + Math.random()* cX;
var topRightY = startY - Math.random()* cY;
var topLeftX = startX -Math.random()* cX;
var topLeftY = startY -Math.random()* cY;
// 右半支
context.beginPath();
//開始路徑
context.moveTo(startX + trunkWidth / 4, startY);
context.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth+1, topRightX, topRightY);
// 繪製一條二次貝塞爾曲線
context.lineWidth = trunkWidth;//寬度
context.lineCap = 'round';//向線條的每個末端添加圓形線帽
context.stroke();
// 左半支
context.beginPath();
context.moveTo(startX - trunkWidth / 4, startY);
context.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth+1, topLeftX, topLeftY);
// 繪製一條二次貝塞爾曲線
context.lineWidth = trunkWidth;
context.lineCap = 'round'; //向線條的每個末端添加圓形線帽
// context.fillStyle="aquamarine";
context.stroke();
// context.fill();
drawBranches(topRightX, topRightY, trunkWidth * 0.6, level + 1);
drawBranches(topLeftX, topLeftY, trunkWidth * 0.6, level + 1);
}
}
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
drawBranches(canvas.width / 2.0, canvas.height/1.5, 4, 1);
</script>
</body>
</html>
![]()
