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
}
这篇关于使用画布创建进度条(不一致)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:使用画布创建进度条(不一致)


猜你喜欢
- 如何显示带有换行符的文本标签? 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01