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

如何使用 HTML5 Canvas 使文本沿着圆形路径旋转？

发布于 2024-11-08 16:45:25 字数 482 浏览 3 评论 0原文

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

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

我想要文本 (或图形）沿着月球绕地球运行的方式绕一个点运行，一个面始终朝向中心。下面的示例展示了这一点，但非常粗略，并且没有使用网络字体。

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

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

原文

分享到QQ

分享到微博

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

发布评论

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

会发光的星星闪亮亮i 2024-11-15 16:45:25

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/

SVG really is the way to go for this kind of thing. I just whipped this up really quick but at least it works as an example. The HTML part can vary a lot but this is one way.

Put this into an html page:

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

Then, create the orbitingText.svg file (it's just a text file with a .svg extension):

<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>

Oh, and if you are worried about cross-browser compatibility, check out this site:
http://code.google.com/p/svgweb/

回复收藏 0 原文

~没有更多了~