Как я могу сделать текстовую орбиту по кругу, используя HTML5 Canvas? - PullRequest
Новая
       39

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

2 голосов
/ 19 мая 2011

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

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

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

Пример: http://javaboutique.internet.com/text/Manipulation/TextRotor/

Я уверен, что есть способ изменить орбитальный код, как в первом примере (только невокруг курсора) так, чтобы каждая буква / изображение оставалось одной стороной к центру (оси).

1 Ответ

2 голосов
/ 20 мая 2011

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/

...