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

【问题标题】：Using Html5 / Javascript graphics in some graphic editor在某些图形编辑器中使用 Html5 / Javascript 图形
【发布时间】：2012-02-03 10:17:04
【问题描述】：

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

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

现在，我当然可以截屏并从那里开始工作，但我确实需要这个矢量格式的图形，以便以后更可靠地使用。

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

【问题讨论】：

我认为不可能。
我不知道有什么方法，但请注意，画布是基于像素的，因此实际上不可能将画布图像转换为 SVG。
谢谢大家，pimvdb - 你是对的，画布是像素化的，但在这种情况下，画布仅用于展示 javascript 向量。所以我们正在寻找 javascript-to-vector 转换而不是 canvas-to-vector ......对不起，如果我不清楚这一点

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

就像其他人评论的那样，没有工具可以帮助您进行 Canvas -> SVG 转换。但是，代码并没有太大的不同。由于您提供的示例很小，您可以使用 Raphael.js 生成 SVG 并将您发布的代码转换为 Raphael.js：

更新

更多细节

包括 Raphael.js
逐行检查您的脚本，并尝试在 Raphael.js 中找到等效项。例如，你正在做的 rgb 颜色的东西会使用这个：http://raphaeljs.com/reference.html#Raphael.rgb
运行生成的js
保存生成的 SVG

【讨论】：