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/

Answer 2

你的代码正好。您需要： s = 0，即起始点必须为零。 如果你想圈开始绘制顶部，你可以使用： context.rotate（-90 * Math.PI/180）; 但旋转后，你将不得不检查arc（）的x，y参数。我用它像：

context.rotate(-90 * Math.PI/180); 
context.arc(-200, 200, 150, startPoint, radian, false); 
context.lineWidth = 20; 
context.strokeStyle = '#b3e5fc'; 
context.stroke(); 
context.closePath(); 

在此之后

我需要显示在文本形式的百分比，所以我所做的：

context.rotate(90 * Math.PI/180); 
context.fillStyle = '#1aa8ff'; 
context.textAlign = 'center'; 
context.font = "bold 76px Verdana";; 
context.textBaseline = "middle"; 
context.fillText("50%", 200, 200);