用 Canvas2D 实现抖音直播点赞效果，打造酷炫点赞体验

2023-10-04 20:16:41

点赞效应：打造移动端抖音直播点赞盛宴

简介

在移动端抖音直播中，点赞是用户表达喜爱和支持的一种互动方式。它可以通过点赞图标的形式出现在屏幕上，既能营造热闹氛围，也能激励主播继续带来精彩内容。本文将深入探讨如何实现仿移动端抖音直播的点赞效果，包括点击时的屏幕图标显示和右下角的所有人点赞图标显示。

绘制点赞图标

首先，我们需要绘制点赞图标。这可以通过使用简单的 SVG 路径来实现，如下图所示：

const heartPath = "M12 21.638h-.013C9.702 22.807 6.94 22.358 5.462 21.05l2.93-3.573L5.423 15.808c-1.522-1.312-2.673-3.342-2.673-5.505 0-2.495 2.053-4.548 4.548-4.548 2.495 0 4.548 2.053 4.548 4.548 0 2.162-1.146 4.192-2.667 5.495l2.93 3.573-2.942 3.586Z";

然后，可以使用 fill() 方法将点赞图标填充为红色，如下所示：

ctx.fillStyle = "red";
ctx.fill(new Path2D(heartPath));

显示点赞图标

当用户点击屏幕时，我们需要显示点赞图标。这可以通过使用 drawImage() 方法将点赞图标绘制到画布上实现，如下所示：

const clickHandler = (event) => {
  // 计算点击位置
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;

  // 绘制点赞图标
  ctx.drawImage(heartIcon, x - 16, y - 16, 32, 32);
};

canvas.addEventListener("click", clickHandler);

显示右下角的所有人点赞图标

最后，我们需要在右下角显示所有人的点赞图标。这可以通过使用 requestAnimationFrame() 方法不断更新画布，并根据点赞人数来显示相应的点赞图标实现，如下所示：

let numLikes = 0;

const updateLikes = () => {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制点赞图标
  for (let i = 0; i < numLikes; i++) {
    ctx.drawImage(heartIcon, canvas.width - 32 - i * 36, canvas.height - 32, 32, 32);
  }

  // 循环调用
  requestAnimationFrame(updateLikes);
};

// 启动循环
updateLikes();