Question

这是我在HTML5画布上的第一次短途旅行，我有jQuery和Javascript的工作知识。我试图用它创造一个“旋转地球”效果。这个想法是让一个圆圈和经线“旋转”在它上面，以产生旋转地球的效果。

我画了圆圈，现在我正在尝试创建从右边开始的线（沿着圆的曲线），向中心直线移动（在中间它们是直的）并遵循逆左边的曲率，以圆圈结束。

我正在尝试使用HTML5画布和jQuery，但我不知道从哪里开始......我应该创建一个弧然后尝试为它设置动画吗？

我甚至想知道画布是否是正确的工具，或者我是否应该使用其他任何东西。

欢迎任何建议！

塞巴斯蒂安

Answer 1

你可以使用二次贝塞尔曲线，它基本上只是一个曲线，中间有一个起点，一个终点和一个“控制点”，这是你想要在地球旋转时想要改变的曲线。在这种情况下，你的所有线路将分别在你的“地球”的北极和南极开始和结束。例如，要生成以下行之一：

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

当然，您还必须考虑如何在每帧之后清除线条。

请参阅：The Canvas element API, Complex Paths

Answer 2

这就是我所得到的，没有时间继续前进：http://jsfiddle.net/Z6h3Z/

我使用贝塞尔曲线，其中两个控制点处于以极点为中心的椭圆弧中。我坚持的是沿弧线分布点看起来更逼真。

HTML5 Canvas（或替代）：移动线条来模拟行星上的经线

2 个答案: