我应该在纸娃娃游戏中使用 SVG 还是 Canvas？

Question

我正在努力创建我的纸娃娃游戏here 的新版本。

现在它在 Flash 中。我想将它更新为 HTML 5，但我不确定是使用 SVG，还是使用 Canvas 绘制的图像，还是导入 Canvas 的 png。从技术角度来看，我想任何一个都可以，但我想考虑性能。

一些事实/要求：

1. 我有用于图像编辑的 Adob​​e Illustrator 和 Photoshop。还有 Adob​​e Edge Animate，如果有任何价值的话。
2. 当我添加一个新图像（例如衬衫）时，最好能够将其放入一个文件夹中，标记为“衬衫”，然后将其集成到程序中，而无需进入并将文件名输入到页面上的数组。使用 PHP 我怀疑我可以从目录中读取这个，但我不确定 SVG 或画布绘图是否可以存储在像这样的单独文件中我
3. 我需要能够调整每个项目的颜色。我想我会为此使用 CSS 过滤器？
4. 对于某些项目，我希望能够仅更改项目部分的颜色（例如花朵的颜色，但不能更改叶子的颜色）。在 Flash 中，这是通过将滤色器仅应用于元素的一层来完成的。不知道如何在这里处理。或许可以通过让两个阵列中的独立、相关图像相互重叠，并将滤色器仅应用于一个阵列。
5. 在用户更改结束时，他们应该能够将图像保存到他们的计算机，或者我应该能够将他们的创建保存到服务器上的目录中。我有这个在 Flash 版本上工作，但它现在坏了。我知道为什么并且可以在新系统中使用相同的过程，但可能有更简单的方法。我听说保存画布的内容很容易。
6. 重叠的形状必须有平滑的边缘，没有锯齿。
7. 需要在 iPad 和 iPhone 上工作。我看到的很多画布和 SVG 示例在我的 iPhone 上都不能正常工作，尽管我确实找到了一个与此类似的工作 SVG 娃娃程序。

其中一些问题可能应该是多个问题，但希望您能指出我正确的方向。我相信无论我尝试哪种方法，我都能找出代码，但我不想从错误的方向开始并浪费时间，因为我对 SVG 和 Canvas 的了解仍然有限。

谢谢。

Answer 1

我的 2 美分：

...

Adobe 插画家：

• SVG 原生支持矢量路径。
• Canvas 有自己的本地路径系统（不兼容 svg）。但！ ... 你可以使用这个非常好的 AI-to-CanvasPath 转换器：http://www.noupe.com/illustrator/ai2canvas-export-html5-canvas-from-adobe-illustrator-74639.html

存储新图像：

• 由于您正在处理图像的子组件，您可能希望将图像保存为路径，而不是图像文件。在 SVG 和 Canvas 路径中，数据都是简单的文本 - 易于存储和提供服务。

调整组件的颜色：

• SVG 可以通过更改组件的“填充”属性直接做到这一点。
• Canvas 可以利用它的合成能力做到这一点。这只是设置起来稍微复杂一些，并且涉及分层。要更改衬衫的颜色，您需要创建一个包含衬衫颜色的单独图层。然后您可以将任何新颜色合成到该图层上。之后，它变得简单而有效。或者，通过一点编程工作，您可以识别要重新着色的任何路径，并使用不同的“fillStyle”重新绘制该路径。

允许用户将图像保存到他们的本地文件系统：

• 出于安全原因，SVG 或 Canvas 都不会本机执行此操作。
• 简单的解决方案：您可以打开一个新的浏览器窗口并让它们右键单击-另存为。
• 更复杂的解决方案：将图像从您的网络服务器中退回，然后让用户从服务器下载它

无抗锯齿：

• 只有 SVG 允许您禁用抗锯齿功能。
• Canvas 在抗锯齿方面做得很好，但您无法关闭抗锯齿功能。

需要在 iPad/iPhone 上工作：

• 支持 SVG 和 Canvas，因此您的应用应该可以正常工作。
• 和往常一样，一定要测试一个微应用来确定！！

结论：

SVG 和 Canvas 都具有您正在寻找的功能，但 SVG 似乎更适合：

• SVG 可以原生使用导出为 svg 格式的 AI 图像。
• SVG 在绘制许多对象时会变慢，但您只绘制了几个组件（没问题）。
• SVG 原生允许您重新着色路径。
• SVG 可让您关闭抗锯齿功能（但根据我的经验，这是个坏主意 - 保持开启！）
• Canvas 擅长非常快速地绘制数千个形状——动画！ （在您的情况下不需要）