这是我的伪代码:
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作为参考。
答案 0 :(得分:9)
您的代码工作得很好,但是您的起始角度应该为零,以获得您期望的结果。这是工作代码:
我认为你的困惑来自起始角度。这并不意味着它从那一点开始,然后将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/
答案 1 :(得分:0)
你的代码很好。你需要: 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);