使用画布创建进度条(不一致) [英] Creating a progress bar using Canvas (Discord)

问题描述

我正在尝试创建一个名为！RANK的命令，该命令显示带有级别的等级卡、在公会中的等级、他们拥有的XP、他们需要升级的XP以及他们的名字。我也在尝试在底部有一个像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>');
         }

推荐答案

我自己解决了

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
            }

这篇关于使用画布创建进度条(不一致)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！