转换器

Question

是否有任何在线工具或可以作为画布代码导出的软件？

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

Answer 1

我所知道的任何工具都无法做到这一点。但你总是可以做自己的。

根据您的需要 -

记录

如果您想复制可以使用录音机进行的所有操作 -

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

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;
...

Answer 2

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

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

<embed src="filename.svg" type="image/svg+xml" />

Answer 3

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

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

将它包含在你的html文件中......只要你需要它们，只需通过传递canvas上下文参数来调用这个函数。

Answer 4

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

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

搜索： HTML5 bezierCurveTo命令生成器

这是一个通过bezier路径绘制GUI生成对toBezierTool的调用的工具。它适用于已经了解JavaScript /画布并希望绘制简单非标准形状的人，但不想摆弄像素值。

OR：画布设计师

一种工具，旨在为您提供完整的绘图表面，并为您自动生成不同格式的相应代码。它以Canvas 2D Context为目标，即它为您提供了Canvas 2D API的内置IDE。

OR： Patternizer

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

HTML5画布生成器

4 个答案:

记录

转换器

转换为图像