HTML 5 Canvas arc () и lineTo () для рисования вкладок по кругу - PullRequest
1 голос
/ 17 сентября 2011

У меня есть круг, который я нарисовал на холсте.Я хотел бы нарисовать объекты в виде вкладок, окружающие этот круг, используя 2 дуги, которые соединены на каждом конце линией, проведенной под определенным углом.К сожалению, поскольку метод lineTo () принимает только координаты x & y, я должен быть в состоянии перевести туда, куда я хочу нарисовать, в этих терминах.

screenshot

Я могу нарисоватьпервая дуга, идущая из точки 4 в 1, но я не знаю, как получить координаты x и y, равные 1, и не узнать, какими должны быть координаты x и y, равные 2.Когда я в 2, мне просто нужно увеличить радиус, чтобы нарисовать дугу от 2 до 3 (или от 3 до 2), но тогда мне нужно будет знать, как получить координаты x, y 4, чтобы я могвызовите lineTo () и передайте x и y из 4. Я думаю, что это, вероятно, какая-то простая геометрия или тригонометрия, включающая Math.sin () и Math.cos (), но мне сложно разобраться с этим.

1 Ответ

1 голос
/ 17 сентября 2011

Я использовал что-то вроде HTML5 Roulette Wheel .

Это даст вам те вкладки, которые вам нравятся, и вы сможете поиграть с интервалом между вкладками.

Вам не понадобится lineTo, вы можете просто использовать заливку и обводку каждой «вкладки» для создания этого эффекта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...