CSS3和Canvas用于文本旋转的比较

Question

4

我脑海中有一个简单的技术演示想法。它会有很多不同的文本标签，可能高达100个，旋转和Z轴顺序也各不相同。此外，还将进行持续动画，因此标签的大小、旋转和位置都会改变。

据我所知，这可以使用CSS3或Canvas来完成。CSS3方法应该更易于访问，但是否还有其他真正需要考虑的区别呢？

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

- Petteri H

2个回答

1

虽然CSS3可能是最好的解决方案，但你至少也应该考虑SVG。
查看实时示例：http://jsfiddle.net/gion_13/DhqEN/show/
附言：Canvas很糟糕，因为它没有文本选择功能。

- gion_13

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

两种方法都可以。我建议先用CSS3制作，如果不满意再使用Canvas。以下是一些考虑因素：

截至目前，对于许多浏览器而言，DOM中的文本比Canvas中的文本看起来更好。某些浏览器在Canvas文本上不进行子像素渲染（而其他浏览器则会），使得在DOM和Canvas中以相同字体写的内容看起来非常不同。为了视觉上的一致性，现在使用CSS3更好。
问问自己，将来可能会用这个做什么。让它变得高度互动？增加超过10,000个对象的数量？那么你需要使用Canvas，简单地说，因为10,000个DOM对象是“不好的事情”。
我不确定仅有100个文本标签时哪种方法更快。在目标平台上编写一个快速测试应该不难。
CSS的制作速度可能会快得多。
Canvas文本渐变在我最近检查的所有移动设备上都不起作用。
Canvas文本旋转+缩放在Chrome和Opera中曾经看起来非常糟糕。自Chrome 12版本以来，Chrome已经解决了这个问题，但Opera仍然看起来很糟糕。您可以在此处检查目标浏览器：http://simonsarris.com/misc/scaleText.html Opera看起来有点像这个。