在 Javascript 中将进度条步骤转换为像素
我使用 html 5 canvas 元素在 javascript 中实现了一个简单的进度条。进度条应该能够显示 100 个步骤。 (0-100%) 进度条应该能够具有可变的大小，可以由用户设置。 因此，对于每一步，我都会绘制一个矩形。
例如： - 进度条画布的宽度为 100px。 - 在每一步中，我都会绘制一个新的一像素宽的块。
问题： - 进度条画布的宽度为 550px。 - 步块大小为 5.5px（550/步） - 我无法绘制半像素。如果我使用 Math.floor 或 Math.Round，进度条将不会填满 100%，或者会“填满”。
我该如何解决这个问题？
var percWidth = Math.round(canvas.width / 100);
for (var i = 0; i<= percentage; i++)
{
var r,g,b;
if (i <= 50)
{
r = 255;
g = Math.round((255*i)/50);
b = 0;
}
else
{
r = Math.round((255*(100-i))/50);
g = 255;
b = 0
}
context.fillStyle = "rgb("+r+", "+g+", "+b+")";
context.fillRect((i*percWidth), 0, (1*percWidth), canvas.height);
}
I've implemented a simple progressbar in javascript using the html 5 canvas element. The progressbar should be able to show 100 steps. (0-100%)
The progressbar should be able to have variable size, which can bet set by the user.
So, for every step I draw a rectangle.
For example:
- The progressbar canvas has a width of 100px.
- On every step I draw a new one pixel wide block.
The problem:
- The progressbar canvas has a width of 550px.
- The step-block-size would be 5.5px (550/steps)
- I'm unable to draw half pixels. If I use Math.floor or Math.Round the progressbar won't be filled out complete at 100% or it will be "overfilled".
How can I solve that problem?
var percWidth = Math.round(canvas.width / 100);
for (var i = 0; i<= percentage; i++)
{
var r,g,b;
if (i <= 50)
{
r = 255;
g = Math.round((255*i)/50);
b = 0;
}
else
{
r = Math.round((255*(100-i))/50);
g = 255;
b = 0
}
context.fillStyle = "rgb("+r+", "+g+", "+b+")";
context.fillRect((i*percWidth), 0, (1*percWidth), canvas.height);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
仅对最终结果进行四舍五入：
Only round the final result:
我知道这并不直接适用于您的问题 - 但是
是合适的替代品吗？I know this isn't directly applicable to your question -- but is the
<progress>a suitable substitute?