<!DOCTYPE html>
<html>
<head>
<title>绘制一棵树</title>
<script type="text/javascript">
function drawBranches(context,startX,startY,trunkWidth,level){
if(level<12){
var changeX=100/(level+1);
var changeY=200/(level+1);
var topRightX = startX+Math.random()*changeX;
var topRightY = startY-Math.random()*changeY;
var topLeftX = startX-Math.random()*changeX;
var topLeftY = startY-Math.random()*changeY;
context.beginPath();
context.strokeStyle="green";
context.moveTo(startX+trunkWidth/4,startY);
context.quadraticCurveTo(startX+trunkWidth/4,startY-trunkWidth,topRightX,topRightY);
context.lineWidth = trunkWidth;
context.lineCap = "round";
context.stroke();
context.beginPath();
context.strokeStyle="green";
context.moveTo(startX-trunkWidth/4,startY);
context.quadraticCurveTo(startX-trunkWidth/4,startY-trunkWidth,topLeftX,topLeftY);
context.lineWidth = trunkWidth;
context.lineCap = "round";
context.stroke();
drawBranches(context,topRightX,topRightY,trunkWidth*0.7,level+1);
drawBranches(context,topLeftX,topLeftY,trunkWidth*0.7,level+1);
}
}
window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
drawBranches(context,canvas.width/2,canvas.height,50,0);
}
</script>
</head>
<body style="margin:100px 10px;">
<canvas id="myCanvas" width="600" height="500" style="border:2px solid #06c;">
</canvas>
</body>
</html>
显示效果如下：
HTML5 Canvas 绘制树，每次刷新，树的形状都会变的。本实例来自网络。传送门：http://demo.cnmsdn.com/demo42.html