这是我的伪代码:
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供引用。
最佳答案
您的代码工作正常,但您的起始角度应该为零才能获得预期效果。这是工作代码:
我认为您的困惑来自起始角度。这并不意味着它从该点开始,然后向其添加 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/
关于HTML5 : Fill circle/arc by percentage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8931928/