在某些图形编辑器中使用Html5 / Javascript图形

时间:2012-01-05 15:29:34

标签: javascript svg html5-canvas vector-graphics file-conversion

我得到了一些使用JavaScript / Html5 Canvas制作的图形设计。

看看这里: http://yeda.us/js/logos.js

现在,我需要将这个图形元素以他可以使用的某种格式提供给图形设计师:以photoshop或Illustrator友好格式。

现在,我当然可以截取屏幕截图并从那里开始工作,但我确实需要这种矢量格式的图形,以后可以更加强大地使用。

有没有办法将上面提到的代码转换为图形?或许以某种方式将其转换为SVG?

2 个答案:

答案 0 :(得分:5)

查看SVGCanvas,它定义了一个与HTML5画布兼容的API,可以从绘图命令创建SVG输出。它可能无法处理所有事情,但是您的简单示例应该可以正常工作。

只需将代码的相关位粘贴到left textareas之一,然后单击“执行”,然后从右侧的textarea复制svg输出。

答案 1 :(得分:2)

像其他人评论的那样,没有任何工具可以帮助你制作画布 - > SVG转换。但是,代码并没有太大的不同。由于您提供的样本相当小,您可以使用Raphael.js生成SVG并将您发布的代码转换为Raphael.js:

http://raphaeljs.com/

更新

更多细节

  1. 包括Raphael.js
  2. 逐行浏览您的脚本,并尝试在Raphael.js中找到等价物。例如,您正在执行的rgb颜色将使用此:http://raphaeljs.com/reference.html#Raphael.rgb
  3. 运行生成的js
  4. 保存生成的SVG