javascript - 如何将 kineticjs 舞台复制到另一个 Canvas

Question

我正在编写一个页面上可能有数百个 Canvas 的应用程序。与其让每个 Canvas 都有一个单独的舞台，我决定让一个编辑器拥有一个舞台。编辑完成后，应将舞台内容复制到另一个 Canvas 。

Stage 提供 toImage 和 toDataURL 来获取内容，但是根据此性能测试，与 context.drawImage 相比，这两种方法都非常慢。

参见:http://jsperf.com/copying-a-canvas-element

因为我在一个舞台上只使用了一个层，而一个层有一个 Canvas ，我想我可以这样做:

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

不幸的是，它没有产生任何结果(它确实运行了)

由于舞台有 bufferCanvas 我也尝试过:

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

虽然我可以在页面上的舞台 Canvas 上看到内容，但仍然没有结果。

但是，如果我深入了解我的页面以获取由 kineticjs 创建和使用的实际 Canvas :

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

我确实得到了结果。将 kineticjs 舞台内容复制到另一个 Canvas 的正确方法是什么？

Answer 1

像这样访问图层 Canvas 元素:

var canvasElement = layer.getCanvas().getElement();

上下文是这样的:

var context = layer.getCanvas().getContext();

这是感兴趣的文档:

http://kineticjs.com/docs/Kinetic.Layer.html#getCanvas

http://kineticjs.com/docs/Kinetic.Canvas.html