Как сделать текстовую орбиту по кругу с помощью HTML5 Canvas?

Question

Существует ряд фрагментов кода JavaScript, которые заставляют текст или графику перемещаться по круговой траектории, при этом буквы или слова всегда находятся в вертикальном положении.

Пример: http://www.dseffects.com/f_scripts.html

Я хочу, чтобы текст (или графика) вращался вокруг точки, по которой Луна вращается вокруг Земли, с одним лицом всегда к центру. Следующий пример показывает это, но очень грубо и не использует веб-шрифты.

Пример: 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/