CSS3 vs Canvas用于文本旋转

Question

我有一个想法，想要一个简单的技术演示。它将有一个很好的数量，可能高达100，不同的文本标签与不同的旋转和Z顺序。此外，还会有不断的动画，因此标签的大小，旋转和位置都会发生变化。

据我所知，这可以使用CSS3或Canvas来完成。 CSS3方法应该更容易理解，但还有其他真正的差异需要考虑吗？

编辑：我还需要能够准确地放置标签的中心点。

Answer 1

要么应该没事。我开始制作一个CSS3，然后只有在某种程度上不满意时才制作一个Canvas。一些注意事项：

• 截至今天，对于很多浏览器来说，DOM中的文本看起来比Canvas上的文本好很多。有些浏览器不会在Canvas文本上进行子像素渲染（而其他浏览器也会这样做）使得在DOM和canvas中使用相同字体编写的内容看起来非常不同。为了视觉上的一致性，CSS3现在更好。
• 如果有的话，问问自己以后你可能想做些什么。把它变得高度互动？增加10000以上的物体数量？然后你会想要做Canvas，简而言之，因为10,000个DOM对象是一个“坏事”。
• 我不确定哪一个只有100个文本标签会更快。在目标平台上编写快速测试并不难看。
• CSS可能要快得多。
• Canvas文本渐变在我检查过的所有移动设备上都不起作用
• Canvas文本旋转+缩放用于在Chrome和Opera中查看AWFUL。 Chrome从版本12开始修复，Opera看起来仍然很糟糕。您可以在此处查看目标浏览器：http://simonsarris.com/misc/scaleText.html Opera类似于this。

Answer 2

虽然css3是最好的解决方案，但你至少应该考虑svg 看一个实例：http://jsfiddle.net/gion_13/DhqEN/show/
附： ：画布的大减号，因为它没有文本选择