我正在使用 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);
}
结果：仅显示一个用户的个人资料图片（最后一个排行榜中的用户）
2
所有的头像都画在画布上，你只能看到最后一个的唯一原因是因为你把它们画在彼此顶部的相同位置。
您已经有一个变量（i），每次迭代后都会增加，您应该使用它来增加图像的 Y 坐标，如下所示：
let size = 50
let padding = 10
ctx.drawImage(avatar, padding, padding + i * (size + padding), size, size);
drawImage方法的第二个和第三个参数是图像的 X 和 Y 坐标。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（68条）