当前位置：文江博客话题详情

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

发布于 2024-11-18 20:32:00 字数 333 浏览 3 评论 0原文

这是我第一次涉足 HTML5 画布，我拥有 jQuery 和 Javascript 的工作知识。我正在尝试用它创建“旋转地球”效果。这个想法是让一个圆圈和经络在其上“旋转”，以产生旋转地球仪的效果。

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

我正在尝试使用 HTML5 画布和 jQuery 来完成此操作，但我不确定从哪里开始...我应该创建一个弧线，然后尝试为其设置动画吗？

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

欢迎任何建议！

塞巴斯蒂安

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

草莓味的萝莉 2024-11-25 20:32:00

您可以使用二次贝塞尔曲线，它基本上只是一条具有起点、终点和中间“控制点”的曲线，这是您在地球旋转时想要更改的内容。在这种情况下，您的所有线都将分别在“地球”的北极和南极开始和结束。例如，要制作以下线条之一：

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

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

请参阅：Canvas 元素 API，复杂路径

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

回复收藏 0 原文