CSS3 vs Canvas的文字旋轉

Question

我有一個想法，在我的腦海裏進行簡單的技術演示。它將有一個很好的數量，可能高達100個不同的旋轉和Z-順序的文本標籤。此外，還會有不斷的動畫，因此標籤的大小，旋轉和位置會發生變化。

這可以使用CSS3或Canvas完成，據我所知。 CSS3方法應該更易於訪問，但還有其他真正的區別需要考慮嗎？

編輯：我也需要能夠以他們的中心點相當準確地放置標籤。

Answer 1

兩者都應該沒問題。我首先製作一個CSS3，然後只在某種程度上不滿意的情況下製作一個Canvas。一些注意事項：

• 截至今天，DOM中的文本看起來比Canvas上的文本好很多瀏覽器。某些瀏覽器不會在Canvas文本上進行子像素渲染（而其他瀏覽器），使其在DOM和畫布中以相同字體寫入的東西看起來完全不同。爲了視覺一致性，CSS3現在更好。
• 問問你自己，如果有的話，你可能想怎麼做。把它變得高度互動？增加10000個以上的對象數量？然後你會想做Canvas，簡而言之，因爲10,000個DOM對象是一件「壞事」。
• 我不確定哪一個會更快，只有100個文本標籤。在你的目標平臺上寫一個快速測試來看看應該不難。
• CSS的製作可能會快得多。
• 畫布文本漸變不適用於所有移動設備最後我檢查
• 畫布文本旋轉+縮放用於在Chrome和Opera中查看AWFUL。 Chrome從版本12開始已經修復，Opera仍然看起來很糟糕。你可以在這裏檢查你的目標瀏覽器：http://simonsarris.com/misc/scaleText.html歌劇排序看起來像this。

Answer 2

雖然css3是最好的解決方案，但您至少應該考慮svg。
看到一個生動的例子：http://jsfiddle.net/gion_13/DhqEN/show/
p.s. ：畫布的大減號，因爲它沒有文字選擇