写一段js代码 生成心形动画，动画路径内部填充渐变色

以下是一个用纯JS和HTML5 Canvas实现的生成心形动画的代码，路径内部填充渐变色：

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  
  // 设置画布大小
  canvas.width = 500;
  canvas.height = 500;
  
  // 定义心形路径
  const path = new Path2D();
  path.moveTo(250, 100);
  path.bezierCurveTo(250, 50, 200, 0, 150, 0);
  path.bezierCurveTo(50, 0, 0, 50, 0, 150);
  path.bezierCurveTo(0, 250, 250, 450, 250, 450);
  path.bezierCurveTo(250, 450, 500, 250, 500, 150);
  path.bezierCurveTo(500, 50, 450, 0, 350, 0);
  path.bezierCurveTo(300, 0, 250, 50, 250, 100);
  
  // 创建渐变色
  const gradient = context.createLinearGradient(0, 0, 500, 500);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "white");
  
  // 定义动画函数
  function animate() {
    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // 填充渐变色
    context.fillStyle = gradient;
    context.fill(path);
    
    // 改变心形大小
    path.scale(0.98, 0.98);
    
    // 循环动画
    if (path.currentTransform.a > 0.01) {
      window.requestAnimationFrame(animate);
    }
  }
  
  // 启动动画
  animate();
</script>

这个代码创建了一个HTML5 Canvas元素，然后使用纯JS和Canvas API在画布上绘制一个心形路径，并通过填充渐变色创建了一个动画效果。动画效果是通过反复缩小心形路径来实现的，当心形路径的大小几乎变为0时，动画停止。这个代码还使用了window.requestAnimationFrame()方法来实现平滑的动画效果。