我正在尝试创建一个圆形进度条(尽管它不再是进度条了,对吗?)。在这个criicle周围有垂直于圆圈的细条。现在的问题是,我的代码不会以均匀的间距生成条形。这是代码和结果的图像:
function MH5PB(canvasId, //the id of the canvas to draw the pb on
value, //a float value, representing the progress(ex: 0.3444)
background, //the background color of the pb(ex: "#ffffff")
circleBackground, //the background color of the bars in the circles
integerColor, //the color of the outer circle(or the int circle)
floatColor //the color of the inner circle(or the float circle)
)
{
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var radius = Math.min(canvasWidth, canvasHeight) / 2;
var numberOfBars = 72;
var barThickness = 2;
//margin from the borders, and also the space between the two circles
var margin = parseInt(radius / 12.5) >= 2 ? parseInt(radius / 12.5) : 2;
//the thickness of the int circle and the float circle
var circleThickness = parseInt((radius / 5) * 2);
//the outer radius of the int circle
var intOuterRadius = radius - margin;
//the inner radius of the int circle
var intInnerRadius = radius - margin - circleThickness;
//the outer radius of the float circle
var floatOuterRadius = intOuterRadius - margin - circleThickness;
//the inner radius of the float circle
var floatInnerRadius = floatOuterRadius - circleThickness;
//draw a bar, each degreeStep degrees
var intCircleDegreeStep = 5;
// ((2 * Math.PI * intOuterRadius) / (barThickness + 10)) //
// this area is the total number of required bars //
// to fill the intCircle.1px space between each bar//
var floatCircleDegreeStep = 360 / ((2 * Math.PI * floatOuterRadius) / (barThickness + 10));
context.lineWidth = barThickness;
context.strokeStyle = circleBackground;
//draw the bg of the outer circle
for(i = 90; i < 450; i+=intCircleDegreeStep)
{
//since we want to start from top, and move cw, we have to map the degree
//in the loop
cxOuter = Math.floor(intOuterRadius * Math.cos(i) + radius);
cyOuter = Math.floor(intOuterRadius * Math.sin(i) + radius);
cxInner = Math.floor(intInnerRadius * Math.cos(i) + radius);
cyInner = Math.floor(intInnerRadius * Math.sin(i) + radius);
context.moveTo(cxOuter, cyOuter);
context.lineTo(cxInner, cyInner);
context.stroke();
}
}
编辑:哦,线条也没有抗锯齿。你知道为什么吗?我还应该解释一下,这个进度条由两部分组成。一个外圆(在提供的图像中可见)和一个内圆。外圈是百分比的整数部分的数量(即45.98% 中的45),内圈是百分比的非整数部分的数量(即45.98% 中的98)。因此,您现在知道 intCircle 和 floatCircle 是什么 :)