如何使用HTML5 Canvas沿着圓形路徑創建文本軌道？

有許多JavaScript片段可以使文本或圖形沿着圓形路徑行進，字母或單詞始終保持直立。如何使用HTML5 Canvas沿着圓形路徑創建文本軌道？

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

我想有文本（或圖形）軌道上的點月球圍繞地球軌道運行的方式，總是一面朝向中心。下面的例子顯示了這一點，但非常粗暴，並沒有使用網絡字體。

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

我確信有一種方法來修改軌道狀的第一個例子的代碼（僅圍繞不是光標），使每個信/圖像保持一側朝向中心（軸）。

來源

2011-05-19 InfiniteMonkeys

svg使用沿着路徑的文本執行最佳效果，因爲它旨在這樣做，並且因爲它不會像素化文本 – 2011-05-19 19:26:27

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/

來源

2011-05-19 21:20:19 BDawg

謝謝。這很有趣。我需要弄清楚如何對它進行參數化。我做了一些改變，但還沒有想出如何讓圓的開始到底。更重要的是，我嘗試將它放在AP Div標籤中，這就是我需要控制位置和透明度的方式，而且它似乎不是那種方式。我會繼續玩，看看它是否滿足我的需求。 – InfiniteMonkeys 2011-05-20 03:09:06

實際上，您可以將SVG標記直接注入到HTML5文檔中。（在AP Div標籤內），當我嘗試了這一點，但動畫停止工作。本頁解釋了可以將svg放入網頁的不同方式：http://www.w3schools.com/svg/svg_inhtml.asp您可能還需要設置preserveAspectRatio屬性以使其在AP Div中正確顯示： http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute – BDawg 2011-05-20 16:00:22

默認情況下，SVG標籤似乎填充其容器。因此，如果缺少width =「100％」和height =「100％」，則隱含。 SVG有它自己的DOM，所以你可以用Javascript編輯它的一部分，或者你可以將一些CSS屬性應用到SVG標籤來做一些有趣的事情。我很確定透明度可以通過CSS完成，但我還沒有嘗試過。（請嘗試更改圓圈或文字標籤上的不透明屬性？） – BDawg 2011-05-20 16:04:44

如何使用HTML5 Canvas沿着圓形路徑創建文本軌道？

回答

相關問題