Html 绘图画布的编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15470485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Editor for Drawing canvas
提问by Anurag
I am facing a problem for drawing a complex image using canvas tag and using JavaScript.
我在使用 canvas 标签和使用 JavaScript 绘制复杂图像时遇到了问题。
I need a tool, or we can say editor, by using which I can draw any image. It returns Javascript code using canvas, which I can include in html pages.
我需要一个工具，或者我们可以说是编辑器，通过它我可以绘制任何图像。它使用画布返回 Javascript 代码，我可以将其包含在 html 页面中。
Thanks!
谢谢！
回答by jing3142
I have a project where you can draw complex canvas shapes and export them into an HTML file. You can then edit the file as required
我有一个项目，您可以在其中绘制复杂的画布形状并将它们导出到 HTML 文件中。然后您可以根据需要编辑文件
My project is at http://canvimation.github.com/
我的项目在http://canvimation.github.com/
Hope this is of help
希望这有帮助
回答by markE
For really complex images, use Adobe Illustrator to do the designing (a world class design editor).
对于非常复杂的图像，请使用 Adobe Illustrator 进行设计（世界一流的设计编辑器）。
Then save your image in .SVG format.
然后将您的图像保存为 .SVG 格式。
BTW, You can load the file (example "yourArt.svg") directly into an img tag.
顺便说一句，您可以将文件（例如“yourArt.svg”）直接加载到 img 标签中。
But, more to your question, you can then use a canvas drawing library called FabricJS to read the svg and draw it to a canvas. The library website is: http://fabricjs.com/
但是，对于您的问题，您可以使用名为 FabricJS 的画布绘图库来读取 svg 并将其绘制到画布上。图书馆网站是：http: //fabricjs.com/
Alternatively, you can use an online conversion tool to convert yourArt.svg into the required canvas drawing commands. A popular svg-to-canvas converter is: http://www.professorcloud.com/svg-to-canvas/
或者，您可以使用在线转换工具将 yourArt.svg 转换为所需的画布绘图命令。一个流行的 svg-to-canvas 转换器是：http: //www.professorcloud.com/svg-to-canvas/
A word of warning...these techniques might require tweaking of the resulting canvas draw commands--especially if your artwork uses the more advanced techniques in Illustrator.
警告...这些技术可能需要调整生成的画布绘制命令——尤其是如果您的作品使用了 Illustrator 中更高级的技术。
Your artwork can be very complex and still be handled! Check out the SVG section of the FabricJS demos: http://fabricjs.com/kitchensink/
您的作品可能非常复杂，但仍然可以处理！查看 FabricJS 演示的 SVG 部分：http://fabricjs.com/kitchensink/
回答by Guy Levinger
Another great online tool is called HTML Canvas Studio.
另一个很棒的在线工具称为HTML Canvas Studio。
It behaves like other painting programs and when you finish, you can export the drawing to HTML+JS.
它的行为与其他绘画程序一样，完成后，您可以将绘图导出为 HTML+JS。
The tool can be found here:http://www.htmlcanvasstudio.com/
该工具可以在这里找到：http : //www.htmlcanvasstudio.com/
