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库来控制我创建的形状并根据需要重新绘制它们。我的问题是上面的代码根本不起作用。我认为我的数学计算有误，因为如果我将弧度更改为类似4.0 * Math.PI的内容，则会绘制整个圆。

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

- Nahydrin

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/

- Simon Sarris

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);

- Nazia Naheed