帆布还是PNG？（用于 html5 动画）答案

【问题标题】：Canvas or PNG? (for html5 animation)帆布还是PNG？（用于 html5 动画）
【发布时间】：2012-06-04 18:40:29
【问题描述】：

我要开发一个html5富动画。我已经在 Illustrator 中设计了组件，但现在的问题是如何导出这些组件？ 通过 Canvas 对象？还是通过图片（png）？。

请注意，组件可能会有一些变化（就像一朵花在某个时候长出了翅膀）..

Canvas 可以让我轻松添加和删除这些添加，但是对于 Image，我应该使用 z-index 将它们设为绝对。
图像将防止未经许可复制我的组件（至少它可以防止任何人将它们作为矢量图像）.. 所以它真的很有优势。

谢谢！，〜阿尔莫格巴库

【问题讨论】：

也许我错了，我会发现一些东西，但是……canvas 和 png 确实不同。你不能用 png 做动画。
@JeromeC。嘿，但无论如何我打算用 javascript 和 css3 制作我的动画。所以没那么重要。

标签： javascript html canvas html5-animation

【解决方案1】：

如果你想要一些快速的东西，有很多精灵和直接交互，那很容易：使用画布。

此 API 与其他语言中最常见的 2D 图形 API 之一非常相似，可以“直接”绘图和合成。

一旦你有很多对象和转换，使用 html 引擎来组合和重绘东西是非常无效的。

【讨论】：

【解决方案2】：

因为 Illustrator 是一个矢量应用程序，您可能希望查看大多数 HTML5 浏览器支持的 SVG 格式。

您可以获取 Illustrator HTML5 SVG 包here，和解释here。

【讨论】：

【解决方案3】：

如果您使用 svg，请查看 Raphaeljs 库，它可以更轻松地从 javascript 操作 svg

【讨论】：

【解决方案4】：

我发现为网络构建丰富的动画（短片）最简单、最有效的方法是using both JS and css animations/transictions..

用 sass+compass 构建它也使它变得简单而强大..

为什么？以及我的研究

实际上，我制作了同一部动画电影两次半：
首先，我只使用 jQuery 构建了整部电影（这真的很慢、笨拙且难以构建）。
比，我尝试了画布..但我发现很难创建一些常见的转换，比如上滑等等。所以，我尝试使用一些常见的画布库来实现它..并在一段时间后放弃了（电影完成了 1/5）。
我选择使用 compass+sass 和 CSS ANIMATIONS/TRANSICTIONS 从头开始实现它，我发现它是处理这个问题的最强大、最简单的解决方法和快速的开发方式。

我正在实现由 css 类检测到的 css 动画中的每个“幻灯片”。并使用监听 css 动画事件的 JS 确定每张幻灯片的结尾。

【讨论】：