js 延时绘制一颗爱心树

以下是一个利用canvas和JavaScript绘制延时效果的爱心树的示例代码：

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var delay = 50;
  var i = 0;
  var intervalId;

  function drawHeart(x, y, size) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.bezierCurveTo(x + (size / 2), y - (size / 2), x + size, y + (size / 2), x, y + size);
    ctx.bezierCurveTo(x - size, y + (size / 2), x - (size / 2), y - (size / 2), x, y);
    ctx.fill();
  }

  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();
  }

  function draw() {
    if (i > 10) {
      clearInterval(intervalId);
      return;
    }
    ctx.fillStyle = "red";
    drawHeart(250, 250, i * 10);
    drawTree(250, 500, 100, 0);
    i++;
  }

  intervalId = setInterval(draw, delay);
</script>

这段代码将创建一个500x500像素的画布，并在其中绘制一个延时效果的爱心树。首先定义了`drawHeart`函数用于绘制爱心，参数`x`和`y`表示起始点的坐标，`size`表示爱心的大小。然后定义了`drawTree`函数，用于绘制树，与之前的示例代码相同。在`draw`函数中，使用`setInterval`方法每隔一段时间调用一次，绘制出逐渐变大的爱心和树。使用`clearInterval`方法停止绘制。

你可以根据需要修改参数来绘制不同形状的爱心树，例如修改爱心大小、分支长度、夹角、延时等等。