canvas爱心点赞动画效果

实现canvas爱心点赞动画效果的步骤如下：

1. 创建一个canvas元素，并设置其宽高和背景色。
2. 在canvas上绘制一个爱心图案，可以使用二次贝塞尔曲线来绘制。
3. 监听鼠标点击事件，当用户点击canvas时，获取鼠标点击的坐标，并在该位置绘制一个爱心。
4. 使用requestAnimationFrame()方法实现动画效果，每一帧都将所有爱心的位置向上移动一定距离，并且缩小其大小，直到其大小为0时，将其从数组中删除。

以下是实现canvas爱心点赞动画效果的示例代码：

<canvas id="canvas" width="500" height="500" style="background-color: #f5f5f5;"></canvas>

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

function drawHeart(x, y, size) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.bezierCurveTo(x + size / 2, y - size / 2, x + size, y, x + size, y + size / 2);
  ctx.bezierCurveTo(x + size, y + size, x + size / 2, y + size * 1.5, x, y + size * 1.5);
  ctx.bezierCurveTo(x - size / 2, y + size * 1.5, x - size, y + size, x - size, y + size / 2);
  ctx.bezierCurveTo(x - size, y, x - size / 2, y - size / 2, x, y);
  ctx.fillStyle = '#e74c3c';
  ctx.fill();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  hearts.forEach((heart, index) => {
    if (heart.size <= 0) {
      hearts.splice(index, 1);
      return;
    }
    heart.y -= heart.speed;
    heart.size -= heart.speed / 10;
    drawHeart(heart.x, heart.y, heart.size);
  });  requestAnimationFrame(draw);
}

canvas.addEventListener('click', (event) => {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  hearts.push({
    x,
    y,
    size: 30,
    speed: Math.random() * 5 + 5
  });
});

draw();