用于文本旋转的 CSS3 与 Canvas答案

【问题标题】：CSS3 vs Canvas for text rotation用于文本旋转的 CSS3 与 Canvas
【发布时间】：2011-08-27 03:06:39
【问题描述】：

我有一个简单的技术演示的想法。它将有大量（可能多达 100 个）具有不同旋转和 Z 顺序的不同文本标签。此外，还会有持续的动画，因此标签的大小、旋转和位置会发生变化。

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

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

【问题讨论】：

【解决方案1】：

两者都应该没问题。我会先制作一个 CSS3 的，然后只有在不知何故不满意时才制作一个 Canvas。一些注意事项：

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

【讨论】：

【解决方案2】：

虽然 css3 是最好的解决方案，但您至少也应该考虑 svg。
看一个活生生的例子：http://jsfiddle.net/gion_13/DhqEN/show/
p.s. : 画布的一大缺点，因为它没有文本选择

【讨论】：