Старый вопрос, но звучит как забавная проблема. Я придерживаюсь 2D в этой точке. Если вам требуется 3D, вы можете начать с изучения этого и затем выяснить, как превратить его в 3D-пространство, что, очевидно, намного сложнее.
Вы хотите найти угол среза пирога, образованного дугой, начинающейся в 12 часов (пи / 2) и заканчивающейся радиусом, который делит пополам мышь и вершину. Затем используйте холст, чтобы заполнить эту область.
Математика -
Найдите этот угол, построив прямоугольный треугольник:
Сторона 1 (y): по вертикали от центра круга (вершины) до положения y щелчка
Сторона 2 (x): по горизонтали от положения y щелчка до положения x щелчка
Сторона 3: по диагонали от вершины до положения x щелчка (это гипотенуза, красного цвета, и ее не нужно знать)
Помните, положение мыши считается слева направо и сверху вниз.
Посмотрите, как длина стороны x равна положению x щелчка за вычетом радиуса круга?
Затем используйте котангенс (соседняя сторона / противоположная сторона) и вычтите его из числа пи (180 градусов), чтобы найти угол затененной области.
Как вы можете видеть, в некоторых квадрантах вы добавляете пи, а в некоторых - нет, но именно так вы и находите угол своего среза.
Кроме того, вы должны отрегулировать 1/4 пути вокруг круга (1/2 пи), потому что вы начинаете с 1/2 пи (90 градусов).
Код -
Это плагин jQuery -
https://raw.github.com/thilosavage/pielighter/master/pielighter.js
Диаметр круга задается свойством size элемента canvas.
т.е.
<canvas id='myPIe' size='400'></canvas>
создаст ваш круг шириной 400px.
Вы можете настроить размер границы, цвет границы и цвет заливки.
Вы можете добавить обратные вызовы для onRelease и onDrag, которые передают проценты, градусы и радианы выбранного среза.
Простая демонстрация: http://thilosavage.com/projects/pielighter/demo-simple.php
Полная демонстрация: http://thilosavage.com/projects/pielighter/demo-full.php