HTML 5 Canvas arc() 和 lineTo() 围绕圆圈绘制选项卡答案

【问题标题】：HTML 5 Canvas arc() and lineTo() to draw tabs around a circleHTML 5 Canvas arc() 和 lineTo() 围绕圆圈绘制选项卡
【发布时间】：2011-09-17 10:03:59
【问题描述】：

我在画布上画了一个圆圈。我想使用 2 条弧线围绕这个圆圈绘制类似标签的对象，这些弧线在每一端连接有一条以一定角度绘制的线。不幸的是，由于 lineTo() 方法只接受 x 和 y 坐标，我必须能够用这些术语翻译我想要绘制的位置。

我可以绘制第一条弧线，从点 4 到 1，但我不知道如何获得 1 的 x 和 y 坐标，也不知道如何计算 2 的 x 和 y 坐标需要什么是。一旦我在 2，我只需要增加半径来绘制从 2 到 3（或 3 到 2）的弧，但是我需要知道如何获得 4 的 x、y 坐标以便我可以调用 lineTo() 并传递 4 的 x 和 y。我认为这可能是一些涉及 Math.sin() 和 Math.cos() 的简单几何或三角函数，但我很难弄清楚。

【问题讨论】：

mathworld.wolfram.com/PolarCoordinates.html 会给你积分
你能把你的代码贴出来吗？

标签： javascript canvas geometry

【解决方案1】：

我用过HTML5 Roulette Wheel之类的东西。

这将为您提供您喜欢的标签，并且您可以调整标签之间的间距。

您不需要 lineTo，只需使用每个“标签”的填充和描边来创建该效果。

【讨论】：

我不明白如果我不使用 LineTo() 如果我之间有空格，我将如何填充选项卡。我认为我必须能够在 fill() 之前调用 context.closePath() 才能用颜色填充它。
@jamauss - 你读过链接了吗？您只需制作小弧线（例如 10 度左右）并将它们间隔 3 度。填充弧线，描边边框。像 pi 一样简单。