HTML5:按百分比填充圆/弧

Question

这是我的伪代码:

var percentage = 0.781743; // no specific length
var degrees = percentage * 360.0;
var radians = degrees * Math.PI / 180.0;

var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;

var context = canvas.getContext('2d');
context.beginPath();
context.lineWidth = 5;
context.arc(x, y, r, s, radians, false);
context.closePath();
context.stroke();

我正在使用KineticJS库来控制我制作的形状并根据需要重绘它们.我的问题是上面的代码根本不起作用.我假设我的数学不正确,因为如果我改变radians成类似的东西4.0 * Math.PI则绘制整个圆圈.

我一直在使用HTML5 Canvas Arc Tutorial作为参考.

Answer 1

你的代码工作正常,但是你的起始角度应该为零,以达到你的期望.这是工作代码:

http://jsfiddle.net/HETvZ/

我认为你的困惑来自起始角度.这并不意味着它从那一点开始,然后将endAngle弧度添加到它.这意味着角度从那个点开始并且在endAngle弧度点处结束.

因此,如果startAngle为1.0且endAngle为1.3,则只能看到0.3弧度的弧.

如果你希望它以你的思维方式工作,那么你将把startAngle添加到你的endAngle:

context.arc(x, y, r, s, radians+s, false);

就像在这个例子中:http://jsfiddle.net/HETvZ/5/