如何使用 HTML5 画布使文本沿着圆形路径运行

Question

有许多JavaScript片段可以使文本或图形沿着圆形路径移动，字母或单词始终直立。

示例：http://www.dseffects.com/f_scripts.html

我想让文本（或图形）像月球绕地球一样绕一个点运行，一个面始终朝向中心。 下面的示例显示了这一点，但非常粗糙且不使用 Web 字体。

示例：http://javaboutique.internet.com/text/Manipulation/TextRotor/

我相信有一种方法可以像第一个示例一样修改轨道代码（只是不在光标周围），以便每个字母/图像保持一侧朝向中心（轴）。

Answer 1

SVG确实是这种事情的必经之路。 我只是很快地鞭打了这个，但至少它可以作为一个例子。 HTML 部分可能会有很大差异，但这是一种方式。

把它放到一个html页面中：

<iframe src="orbitingText.svg" width="100%" height="100%"></iframe>

然后，创建 orbitingText.svg 文件（它只是一个扩展名为.svg的文本文件）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
<defs>
    <path id="textPath" d="M 150 75 a 75 75 0 1 0 0.00001 0"/>
</defs>
<circle cx="150" cy="150" r="40" stroke="blue" stroke-width="1"></circle>
<text fill="red">
    <textPath xlink:href="#textPath" startOffset="0">
        <animate attributeName="startOffset" dur="7s" from="0" to="500" repeatCount="indefinite" />
        Orbiting Text
    </textPath>
</text>

哦，如果您担心跨浏览器兼容性，请查看此站点：http://code.google.com/p/svgweb/