HTML5 Canvas (или альтернатива): перемещение линий для имитации меридианов на планете

Question

Это моя первая экскурсия по холсту HTML5, у меня есть практические знания jQuery и Javascript.Я пытаюсь создать эффект "вращающегося шара".Идея состоит в том, чтобы иметь круг и меридианы, «вращающиеся» на нем, чтобы создать эффект вращающегося шара.

Я нарисовал круг, и теперь я пытаюсь создать линии, начинающиеся справа(следуя изгибу круга), двигайтесь к центру по прямой линии вверх (посередине они прямые) и следуйте обратной кривизне слева, заканчивая кругом.

Я пытаюсь сделать этос холстом HTML5 и jQuery, но я не уверен, с чего начать ... я должен создать дугу и затем попытаться анимировать ее?

Мне даже интересно, является ли холст правильным инструментом илиесли я должен использовать что-нибудь еще.

Любые предложения приветствуются!

Себастьян

Answer 1

Это то, что я получил, у меня не было времени, чтобы продолжить: http://jsfiddle.net/Z6h3Z/

Я использую кривые Безье, где две контрольные точки находятся в виде овальной дуги с центром в полюсах. Я застрял в распределении точек по дуге, чтобы оно выглядело более реалистичным.

Answer 2

Вы можете использовать квадратичную кривую Безье, которая в основном представляет собой просто кривую с начальной точкой, конечной точкой и «контрольной точкой» в середине, которую вы бы хотели изменить при вращении шара. В этом случае все ваши линии будут начинаться и заканчиваться на северном и южном полюсах вашего "земного шара" соответственно. Например, чтобы сделать одну из этих строк:

// start drawing a line
canvas.beginPath();
// move the the top of your globe
canvas.moveTo(0,0);
/* draw a curve with the control point specified by the first two args, 
 * end point by the second two:
 * (in your case, the control point would be in the middle of the globe) */
canvas.quadraticCurveTo(control_point_x, control_point_y, 0, 50);
// finish drawing, stroke and end
canvas.stroke();
canvas.closePath();

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

См .: API элемента Canvas, сложные пути