写一个canvas的树状图
时间: 2023-10-26 09:20:43 浏览: 39
抱歉,我是一名语言模型,无法进行图形绘制。但是我可以提供一些参考代码供您参考。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Canvas Tree</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
drawTree(ctx, 250, 500, 100, -Math.PI/2, 10, 0.7);
}
function drawTree(ctx, x, y, len, angle, depth, branchWidth) {
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "brown";
ctx.fillStyle = "brown";
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.lineWidth = branchWidth;
ctx.translate(x, y);
ctx.rotate(angle);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if (depth <= 0) {
ctx.restore();
return;
}
drawTree(ctx, 0, -len, len*0.8, angle+Math.PI/4, depth-1, branchWidth*0.6);
drawTree(ctx, 0, -len, len*0.8, angle-Math.PI/4, depth-1, branchWidth*0.6);
ctx.restore();
}
</script>
</body>
</html>
```
JavaScript代码解释:
1. 获取canvas对象及其上下文
```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
```
2. 绘制树枝
```
function drawTree(ctx, x, y, len, angle, depth, branchWidth) {
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "brown";
ctx.fillStyle = "brown";
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.lineWidth = branchWidth;
ctx.translate(x, y);
ctx.rotate(angle);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
```
3. 绘制树叶
```
if (depth <= 0) {
ctx.restore();
return;
}
drawTree(ctx, 0, -len, len*0.8, angle+Math.PI/4, depth-1, branchWidth*0.6);
drawTree(ctx, 0, -len, len*0.8, angle-Math.PI/4, depth-1, branchWidth*0.6);
```
4. 绘制整棵树
```
drawTree(ctx, 250, 500, 100, -Math.PI/2, 10, 0.7);
```
其中,250和500是树的起始坐标,100是树的长度,-Math.PI/2是树的初始角度,10是树的深度,0.7是树干的宽度。