Discord.JS，使用Canvas在For Loop中显示多个用户配置文件图片

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}.nn`

usernames +=  `${user.username}- Level ${level[i].data}nn` 

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

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

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

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

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