0

有没有可以导出为画布代码的在线工具或软件？

例如，我拖动一些框或圆圈，添加一些颜色并点击“导出”，然后我的绘图导出为画布？

4

4 回答 4

3

据我所知，没有任何工具可以做到这一点。但你总是可以自己做。

根据您的需要 -

录音机

如果您想复制所有可以使用记录器执行的操作 -

为您想要使用的不同方法创建包装器，并在将形状等拖到画布上时记录它们的步骤。对于特殊操作，例如将现有对象移动到新位置，您需要为此创建自定义操作。但原则上你可以这样做：

var stack = [];

function myMoveTo(x, y) {
    ctx.moveTo(x, y);
    stack.push({op: 'moveto', x: x, y: y});
}

function myLineTo(x, y) {
    ctx.lineTo(x, y);
    stack.push({op: 'lineto', x: x, y: y});
}

... etc.

现在您的stack数组包含您执行的所有操作，您可以简单地遍历它们并从中生成 JavaScript 代码（或 SVG、重绘画布或将其转换为不同语言的脚本等）。

var code = '  var ctx = canvas.getContext("2d");\n';

for(var i = 0, o; o = stack[i]; i++) {

    /// check what operation this object did
    switch(o.op) {

        case 'moveto':
            code += ' ctx.moveTo(' + o.x + ', ' + o.y + ');\n';
            break;

        case 'lineto':
            code += ' ctx.lineTo(' + o.x + ', ' + o.y + ');\n';
            break;

        ...
    }
}

您的code变量现在包含 JavaScript 代码，您可以将其粘贴到另一个项目中以复制您使用画布所做的绘图。

转换器

如果您不想复制每个动作，您可以使用转换器方法来获取画布当前状态的“快照”（这是我怀疑您真正要求的） -

您只需在画布上绘制并存储对象本身即可。您将需要创建和定义这些对象及其位置、大小、颜色等。

然后，当您点击导出时，您使用与上述类似的方法转换这些对象，但不是复制操作的每个步骤，您只需将图形对象本身转换为当前状态：

/// object also stored in a stack but represents the graphics not the action
var myObject = {type:'line', x1:10, y1:20, x2:70, y2:100, color:'#f70'};
stack.push(myObject);

当你迭代时：

...
case 'line';
    code += 'ctx.beginPath();\n';
    code += 'ctx.moveTo(' + o.x1 + ', ' + o.y1 + ');\n';
    code += 'ctx.lineTo(' + o.x2 + ', ' + o.y2 + ');\n';
    code += 'ctx.strokeStyle = "' + o.color + '";\n';
    code += 'ctx.stroke();\n';
...

转换为图像

如果您只是指“作为图像”，您可以：

var dataUri = canvas.toDataURL();

您可以将其用作图像标签的来源或上传到服务器：

var img = new Image;
img.src = dataUri;
...
于 2013-10-15T19:08:08.087 回答
0

老问题：但是有一些工具......这些是专门的在线工具。我不知道任何软件，但我确定有。

信息由 codetools.net ( http://www.codetools.net/online-tools/html5-canvas-generators )提供

搜索：HTML5 bezierCurveTo 命令生成器

这是一个通过贝塞尔路径绘图 GUI 生成对 toBezierTool 的调用的工具。它适用于已经了解 JavaScript/canvas 并且想要绘制简单的非标准形状但不想摆弄像素值的人。

或：画布设计师

一个旨在为您提供完整的绘图表面并自动为您生成不同格式的适当代码的工具。它以 Canvas 2D 上下文为目标，即它为您提供了用于 Canvas 2D API 的内置 IDE。

或：图案化器

使用 Patternizer，只需几分钟即可轻松制作出令人惊叹的东西。它消除了创建复杂图案的所有工作，让您专注于创造力和游戏。模式可以保存并与任何人共享，允许协作和重新混合。您可以从全球任何设备访问它们。Patternizer 生成可与 patternizer.js 一起使用的代码，以在任何元素上创建这些模式。Patternizer 模式不使用任何图像，只需要一个小脚本。在许多情况下，patternizer 将小于基于图像的解决方案（如果它甚至可以使用图像）。

于 2015-01-06T16:06:53.097 回答
0

Canvas 是一个 HTML 元素，而不是文件的“类型”。您将图形输​​出渲染到画布，而不是显式加载画布。

您可以做的是导出为 SVG（可缩放矢量图形）格式，然后将 .svg 文件嵌入到 HTML 中。

<embed src="filename.svg" type="image/svg+xml" />
于 2013-10-15T09:05:25.430 回答
0

画布代码基本上是用 javascript 编写的 api。你能做的最好的是将你的代码捆绑在一个函数中并将文件保存为 canvascode.js

function foo(context){
   // your canvas code
}

将它包含在您的 html 文件中...只要您需要它们，只需通过传递画布上下文参数来调用此函数。

于 2013-10-15T14:47:49.467 回答