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>

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

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

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

Tags：canvas beginpath

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。