HTML5：按百分比填充圆/弧

发布于 2024-12-28 10:22:36 字数 716 浏览 4 评论 0原文

这是我的伪代码：

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教程作为参考。

原文

Here is my pseudo code:

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

I'm using the KineticJS library to control the shapes I make and redraw them as necessary. My problem is that the above code does not work at all. I assume I have the math incorrect, because if I change radians to something like 4.0 * Math.PI is draws the entire circle.

I've been using HTML5 Canvas Arc Tutorial for reference.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满身野味 2025-01-04 10:22:36

您的代码工作得很好，但是您的起始角度应该为零才能获得您所期望的结果。这是工作代码：

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/

Your code works just fine, but you have a starting angle that ought to be zero to get what you expect. Here's working code:

http://jsfiddle.net/HETvZ/

I think your confusion is from what starting angle does. It does not mean that it starts at that point and then adds endAngle radians to it. It means that the angle starts at that point and ends at the endAngle radians point absolutely.

So if you startAngle was 1.0 and endAngle was 1.3, you'd only see an arc of 0.3 radians.

If you want it to work the way you're thinking, you're going to have add the startAngle to your endAngle:

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

Like in this example: http://jsfiddle.net/HETvZ/5/

回复收藏 0 原文

末骤雨初歇 2025-01-04 10:22:36

你的代码很好。你需要有：
s=0 即起始点必须为零。
如果你想让圆圈从顶部开始绘制，你可以使用：
上下文.旋转(-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);

Your code is just fine. you need to have:
s=0 i.e. starting point must be zero.
and if you want circle to start drawing at top you can use:
context.rotate(-90 * Math.PI / 180);
but after rotating you will have to check arc()'s x,y arguments. i used it like:

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

after this i needed to display percentage in text form so i did:

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

回复收藏 0 原文

~没有更多了~