使用Javascript 运用【递归】绘制【一棵树】的示例

大家好，欢迎来到IT知识分享网。

Canvas是HTML5中的一个重要特性，它是一个可以使用JavaScript绘制图形的HTML元素。本文将分为以下几个部分：

1. 准备工作
2. 绘制背景
3. 绘制树
4. 完整代码

接下来，我们将逐一详细讲解。

1. 准备工作

首先，我们需要在HTML文档中添加一个Canvas元素，并设置它的宽度和高度。代码如下：

<canvas id="canvas" width="800" height="600"></canvas>

接下来，我们需要在JavaScript中获取这个Canvas元素，并获取它的绘图上下文。代码如下：

const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');

2. 绘制背景

在绘制树之前，我们需要先绘制一个背景。这里我们使用Canvas的渐变函数来实现一个渐变色的背景。代码如下：

const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, '#1e3c72'); gradient.addColorStop(1, '#2a5298'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height);

3. 绘制树

接下来，我们就可以开始绘制树了。

3.1 绘制树干

首先，我们需要绘制树干。树干是由一条竖直的线段组成的，我们可以通过Canvas的lineTo函数来实现。代码如下：

ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height); ctx.lineTo(canvas.width / 2, canvas.height - 50); ctx.lineWidth = 10; ctx.strokeStyle = '#8b5a2b'; ctx.stroke();

这段代码中，我们首先通过beginPath函数开始一条新的路径，然后通过moveTo函数将路径的起点移动到Canvas的中心点，再通过lineTo函数将路径的终点移动到Canvas的底部上方50个像素的位置。最后，我们通过lineWidth和strokeStyle属性设置线段的宽度和颜色，并通过stroke函数将路径绘制出来。

3.2 绘制树枝

接下来，我们需要在树干的顶端绘制树枝。树枝是由多条斜线段组成的，我们可以通过递归函数来实现。代码如下：

function drawBranch(x1, y1, angle, depth) { if (depth === 0) return; const x2 = x1 + Math.cos(angle) * depth * 10; const y2 = y1 + Math.sin(angle) * depth * 10; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineWidth = depth; ctx.strokeStyle = '#8b5a2b'; ctx.stroke(); drawBranch(x2, y2, angle - 0.3, depth - 1); drawBranch(x2, y2, angle + 0.3, depth - 1); } drawBranch(canvas.width / 2, canvas.height - 50, -Math.PI / 2, 10);

这段代码中，我们定义了一个名为 drawBranch 的递归函数。该函数接受四个参数：x1、y1表示树枝的起点坐标，angle表示树枝的倾斜角度，depth表示树枝的深度。当树枝的深度为0时，递归结束。否则，我们先通过Math.cos和Math.sin函数计算出树枝的终点坐标x2和y2，然后通过lineTo函数将路径的终点移动到该坐标处。接着，我们通过lineWidth和strokeStyle属性设置线段的宽度和颜色，并通过stroke函数将路径绘制出来。最后，我们通过递归调用drawBranch函数来绘制下一层树枝。

完整代码

<canvas id="canvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, '#1e3c72'); gradient.addColorStop(1, '#2a5298'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); function drawBranch(x1, y1, angle, depth) { if (depth === 0) return; const x2 = x1 + Math.cos(angle) * depth * 10; const y2 = y1 + Math.sin(angle) * depth * 10; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineWidth = depth; ctx.strokeStyle = '#8b5a2b'; ctx.stroke(); drawBranch(x2, y2, angle - 0.3, depth - 1); drawBranch(x2, y2, angle + 0.3, depth - 1); } drawBranch(canvas.width / 2, canvas.height - 50, -Math.PI / 2, 10); </script> 

动画所示，应该加一句什么代码呢？

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。