HTML Canvas 在两点之间绘制圆弧

发布于 2024-10-26 22:08:02 字数 586 浏览 16 评论 0原文

我在那里发现了类似的问题，但没有答案。我画了一个像这样的圆

ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();

，它给出了一个位于 (100,100) 处、半径为 45 的圆，再加上 5 的线宽，使其成为半径为 50 的圆。现在，我想画出完全相同的圆，但颜色不同，并且只有原始周长的 1/4（想想 XBOX 360 红色厄运环）。所以我尝试了这个

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
ctx.closePath();
ctx.stroke();

，但是连接第一个点和最后一个点确实很烦人（有时我想知道是谁创建了画布元素，例如嵌入文本时，但不要让我开始这样做......）

原文

I have found similar questions out there, but no answer. I have sketched a circle like so

ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();

which gives a circle situated at (100,100) with radius 45, plus 5 for the linewidth, making it a circle of radius 50. Now, I want to sketch the exact same circle, but another color, and only 1/4 of the original circumfrance (think the XBOX 360 red ring of doom). So I tried this

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
ctx.closePath();
ctx.stroke();

But that has the really annoying aspect of connecting the first and last points (sometimes I wonder who created the canvas element, like when embedding text, but don't get me started on that...)

分享到QQ

分享到微博

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

发布评论

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

残花月 2024-11-02 22:08:02

我已经注释掉了你不想要的行。通过调用 closePath()，您将关闭弧的路径。

示例

3/4 Arc

JavaScript

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();

jsFiddle。

I've commented out the line you don't want. By calling closePath(), you are closing the path of your arc.

Example

3/4 Arc

JavaScript

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();

jsFiddle.

回复收藏 0 原文

~没有更多了~