Discord.JS，使用 Canvas 在 For 循环中显示多个用户个人资料图片

Question

我正在使用 Canvas 创建用户排行榜，所有统计数据都运行良好。我遇到的一件事是在排行榜上显示每个用户的个人资料图片。用户的 pfp 出现在最后一个位置，我假设其余的都在它下面，但我无法将每个 pfp 放在新的一行上。任何帮助表示赞赏。谢谢！

代码：

  for (var i in level) {
   
  let user = await client.users.fetch(`${level[i].ID.replace('guild_646074330249429012_level_', '')}`).catch(console.error);


    numList += `${level.indexOf(level[i])+1}.\n\n`
    
    usernames +=  `${user.username}- Level ${level[i].data}\n\n` 
    
  ctx.font = "15px coolvetica_rg";
  ctx.textAlign - "center";
  ctx.fillStyle = "#FFFFFF";
  ctx.fillText(numList, 22, 80);

  ctx.font = "24px coolvetica_rg";
  ctx.textAlign - "center";
  ctx.fillStyle =  "#FFFFFF";
  ctx.fillText(usernames, 50, 80);
  ctx.width = "30px";
  ctx.length = "200px";
  ctx.margin = "30px";

  const avatar = await Canvas.loadImage(user.displayAvatarURL({ format: 'jpg' }));
  ctx.drawImage(avatar, 10, 10, 50, 50); 
  }

结果：只显示一个用户的头像（排行榜最后一位用户）

Answer 1

所有头像都画在了canvas上，你只能看到最后一个的唯一原因是你把它们画在了一个相同的位置上。

您已经有一个在每次迭代后增加的变量 (i)。你应该使用它来增加图像的 Y 坐标，像这样：

let size = 50
let padding = 10
ctx.drawImage(avatar, padding, padding + i * (size + padding), size, size);

drawImage方法的第二个和第三个参数是图像的X和Y坐标。

Discord.JS，使用 Canvas 在 For 循环中显示多个用户个人资料图片

Discord.JS, Displaying multiple user Profile Pictures in For Loop using Canvas

javascript

canvas

discord

discord.js