关于图纸和图像的HTML5建议(画布,SVG)

时间:2013-08-07 16:56:11

标签: html5 image canvas svg

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

读到我应该将SVG用于图像让我觉得因为我一般都是HTML和网站设计的新手,所以我应该以不同的方式做到这一点。所以我想知道有些人会如何实现这一点。想要一个好的概念,想想一个人们可以设计自己的T恤的网站。你只需画一个方形画布,圆圈/正方形/线条/空闲手,但也可以在那里贴上照片。谢谢,我不是在寻找代码,只是为了知道我是应该使用HTML / SVG / Canvas的混合,还是我不了解的完全不同的东西。

总结...... svg,或画布......或两者,或完全不同的东西。

1 个答案:

答案 0 :(得分:2)

好的,这就是我想象你希望它发挥作用的方式:

  1. 您的客户选择T恤尺码和款式。
  2. 您网站中的嵌入式应用程序允许用户绘制 他们想要的好设计或导入图像
  3. 价格根据T恤的尺寸和尺寸计算 印刷品
  4. 成功付款后,您会在后端收到一张照片 打印,订单详细信息,然后将图像输入T恤 打印东西,你打印它然后发布它。
  5. 如果这是对的,你应该考虑这个:http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

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

    你需要有一些很好的JS技能,但能够使用SVG编辑,因为它很大但是从我认为它非常适合你的目的。

    如果你想看到SVG和Canvas之间的区别,请阅读:http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/。它很简单。

    为什么我建议使用SVG编辑?我不知道是否有任何其他使用canvas实现的应用程序具有如此多的工具,并且与SVG-edit一样好用。

    它拥有您需要的一切,包括'''SAVE as PNG''功能,如果您的T恤打印机不打印SVG图像,它将用于您的目的。