使用 Canvas (Discord) 创建进度条答案

【问题标题】：Creating a progress bar using Canvas (Discord)使用 Canvas (Discord) 创建进度条
【发布时间】：2021-04-18 20:58:27
【问题描述】：

我正在尝试创建一个名为 !rank 的命令，它会显示等级卡、公会中的等级、他们拥有的经验、他们需要升级的经验和他们的名字。我也试图在底部有一个像 MEE6 这样的进度条。我已经为其余部分编写了代码，但似乎找不到进度条的答案

这里是主要代码：

         if(message.channel.id === '784491491435085865'){
        const colors = [0x00E2FF, 0x00FF85];
        const randomColorNo = Math.floor(Math.random() * colors.length);
        const randomColor = colors[randomColorNo];
 
        const nextLVL = Math.floor(user.level + 1);
        const XPNeeded = Levels.xpFor(nextLVL);

        const background = await Canvas.loadImage('./level.png');
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
       
        const percentage = Math.floor((userPosition.xp / XPNeeded) * 100);
        const roundedPercent = Math.round(percentage);

        var i;
        for(i = 0;i < roundedPercent; i++)  {
            ctx.beginPath();
            ctx.arc(170 + i, 170, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill(randomColor);
        }
        //Tryed to add a progress bar where it draws individual circles for each percentage but 
        //failed

        const attachment = new Discord.MessageAttachment(canvas.toBuffer('image/jpeg', { quality: 1 }), 'levelDisplay.png');

            
                message.channel.send(attachment);
        
         }
         else{
            message.reply('This command is only allowed in <#784491491435085865>');
         }

【问题讨论】：

所以你只有画布部分有问题？使用一些示例数据创建 minimal, reproducible example 是个好主意。
错误编辑代码

标签： javascript node.js canvas discord.js

【解决方案1】：

我自己解决了

var i;
        for(i = 0;i < roundedPercent; i++)  {
            ctx.beginPath()
            ctx.lineWidth = 14
            ctx.strokeStyle = randomColor
            ctx.fillStyle = randomColor
            ctx.arc(203 + (i * 4.32), 190, 8, 0, Math.PI * 2, true)
            ctx.stroke()
            ctx.fill()
            //total length of the total bar is 432, so 1% is 4.32.
            //This code basically draws a circle for each percent
            }

【讨论】：