js 绘制一棵树
时间: 2023-07-08 11:23:13 浏览: 43
以下是一个利用canvas和JavaScript绘制一棵树的示例代码:
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function drawTree(x, y, len, angle) {
ctx.beginPath();
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * Math.PI / 180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if (len < 10) {
ctx.restore();
return;
}
drawTree(0, -len, len * 0.8, -15);
drawTree(0, -len, len * 0.8, 15);
ctx.restore();
}
drawTree(250, 500, 100, 0);
</script>
```
这段代码将创建一个500x500像素的画布,并在其中绘制一棵树。其中,`drawTree`函数用于绘制一棵树的分支,参数`x`和`y`表示起始点的坐标,`len`表示分支的长度,`angle`表示分支与水平线的夹角。在函数内部使用了递归调用,不断绘制出子分支,直到分支长度小于10像素时停止递归。最后,调用`drawTree`函数并传入参数,绘制出一棵完整的树。
你可以根据需要修改参数来绘制不同形状的树,例如修改分支长度、夹角等等。