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. ：画布的大减号，因为它没有文字选择