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/

如何使用HTML5 Canvas沿圆形路径进行文本轨道？

1 个答案: