HTML5 Canvas (or alternative): Moving lines to simulate meridians on a planet

This is my firs excursion on the HTML5 canvas, I have working knowledge of jQuery and Javascript. I'm trying to create a "spinning globe" effect with it. The idea is to have a circle and meridians "spinning" on it, to give the effect of a rotating globe.

I've drawn the circle and now I'm trying to create lines that start from the right (following the curve of the circle), move towards the centre straightnening up (in the middle they are straight) and follow the inverse curvature on the left, ending with the circle.

I'm trying to do this with the HTML5 canvas and jQuery but I'm not sure of where to start... should I create an arc and then try to animate it?

I'm even wondering if the canvas is the 开发者_StackOverflowright tool or if I should use anything else.

Any suggestion is welcome!

Sebastian

You could use a quadratic bezier curve, which is basically just a curve with a start point, an end point, and a "control point" in the middle, which is what you would want to change as the globe spins. In this case, all of your lines would start and end at the north and south poles, respectively, of your "globe". For example, to make one of these lines:

// 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();

You would also have to take in to account how you will clear the lines after each frame, of course.

See: The Canvas element API, Complex Paths

This is what I got, didn't have the time to proceed any further: http://jsfiddle.net/Z6h3Z/

I use bezier curves where the two control points are in a sort of oval arc centered at the poles. What I got stuck at is the distribution of points along the arc to look more realistic.