关于绘图和图像(canvas、SVG)的 HTML5 建议

Question

我正在研究创建一个允许人们为特定产品创建自己的设计的网站。该产品可以有直线、曲线、正方形和各种形状。我不仅希望这些人能够自由手绘他们自己的作品，而且还能够将某些库存图像拖放到(或只需单击一个区域)到模板上。我使用 HTML/Canvas 开始了这个项目，并实现了手绘/形状/线条的绘制，但我读过一些地方说我应该为图像使用 SVG。

读到我应该对图像使用 SVG 让我想到，由于我是 HTML 和一般网站设计的新手，我应该以不同的方式来做这件事。所以我想知道有些人会如何实现这一点。对于一个好的概念，请考虑一个人们可以设计自己的 T 恤的网站。您只需在方形 Canvas 、圆形/正方形/线条/徒手画画，但也可以在上面粘贴库存照片。谢谢，我不是在寻找代码，只是想知道我是否应该混合使用 HTML/SVG/Canvas，或者我不知道的完全不同的东西。

总结一下……svg，或 canvas.......或两者兼而有之，或完全不同。

Answer 1

好的，这就是我想象的您希望它工作的方式:

1. 您的客户选择 T 恤尺码和款式。
2. 您网站中的嵌入式应用程序允许用户绘制他们想要的漂亮设计或导入图片
3. 价格是根据 T 恤的尺码和尺码计算的打印品
4. 付款成功后，您会在后台收到一张图片打印订单详细信息，然后将该图像输入到您的 T 恤中打印东西，你打印它然后发布它。

如果这是正确的，你应该考虑这个:http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

您可能希望从中删除一些不必要的工具，并根据客户选择的 T 恤类型使用不同的配置启动它。一个例子是 T 恤尺码。如果客户选择了一件小号 T 恤，您会启动较小的图纸尺寸。 list 还在继续。

您需要具备一些良好的 JS 技能才能使用 SVG-edit，因为它很大，但我认为它非常适合您的目的。

如果您想了解 SVG 和 Canvas 之间的区别，请阅读:http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ .它非常简单。

为什么我建议使用 SVG-edit？我不知道是否有任何其他使用 Canvas 实现的应用程序具有如此多的工具并且像 SVG-edit 一样工作得很好。

它拥有您需要的一切，包括“另存为 PNG”功能，如果您的 T 恤打印机无法打印 SVG 图像，该功能将满足您的需求。