我应该使用SVG或Canvas进行纸娃娃游戏吗？

Question

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

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

一些事实/要求：

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

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

谢谢。

Answer 1

我的2分：

...

Adob​​e Illustrator：

• 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都不会本地执行此操作。
• 简单解决方案：您可以打开一个新的浏览器窗口并右键单击“另存为”。
• 更复杂的解决方案：将图像从Web服务器退回，让用户从服务器下载

没有抗锯齿：

• 只有SVG允许您禁用抗锯齿。
• Canvas可以很好地消除锯齿效果，但是你无法关闭抗锯齿功能。

需要在iPad / iPhone上运行：

• 支持SVG和Canvas，因此您的应用应该可以使用。
• 一如既往，一定要测试一个微型应用程序!!

结论：

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

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