我正在开发一个当前使用 CSS3 转换构建的 web 应用程序（仅在 Chrome 19+ 中运行）。更具体地说，我使用Jquery Transit通过 Jquery 本身来触发 CSS3 动画。这里的原因是一些动画被画了几秒钟，jquery animate 不够流畅，但 Transit 是一个很好的解决方案。Jquery Transit 运行良好，但我很好奇 HTML5 Canvas 是否会使事情变得更流畅？如果是这样，考虑到我目前正在为 DIV 使用 AJAX 和基于百分比的位置这一事实，是否值得追求？如果这里有人知道 CSS3 动画与 Chrome 中的 HTML5 Canvas 性能相比如何并且愿意提供他们的意见，我将不胜感激！
问问题
22062 次
2 回答
17
CSS3 会给你带来更少的麻烦，并且你可以在未来轻松地对其进行更改，并且它可以在不支持画布的系统上正常工作。
如果您使用的是文本，那么您绝对应该坚持使用 CSS，如果您可以摆脱它的话。Canvas 破坏了您的应用程序的可访问性，并禁止用户使用克拉或突出显示文本或使用文本转语音。
如果您只是制作一个有趣的滑动按钮或其他东西，那么您也应该只使用 CSS，因为它可能更容易实现和维护。重做 CSS 比在（可能很复杂的）JavaScript 上苦苦挣扎更容易。
我不能诚实地告诉你画布渲染是否会更平滑。画布的一个优点是您可以将事物设置为看似更大的尺寸（同时保持画布尺寸相同），而无需重新布局 DOM。在大多数现代系统上，这确实不是问题。
此外，如果它已经用 CSS3 完成了，你真的有性能问题吗？如果还没有人抱怨过性能，为什么还要为画布重写它呢？如果到目前为止您还没有遇到任何真正的性能问题，为什么要重新发明您的应用程序？
于 2012-06-25T03:30:02.890 回答
1
我认为画布可能会遇到的问题是它是基于位图的。因此，在页面初始呈现后放大和缩小将是一个问题。此外，换行可能会很痛苦。编写您网站内容的人可能会发现插入换行符具有挑战性，因为没有使用 canvas、svg 或 vml 的换行符之类的东西。事实上，您需要预先计算换行符。"\n" 使用 raphael.js 有效，但效果不佳。此外，如果您在 svg 图形中，则不能使用选择器来定位各个部分。你也许可以使用画布，也许……画布可能有很多相同的陷阱。
在图像前面，如果缩放图像，您将看到模糊的图像，并且处理画布图像大小调整的库较少。这在未来可能会改变，但仍将是一个考验。对于旧版浏览器，我会坚持使用带有 jquery 后备的 divs/css3。
从纯粹的性能角度来看，请查看对您问题的第一条评论。它有一些不错的基准。
于 2012-06-25T04:10:49.570 回答