如何将kineticjs阶段复制到另一个画布(How to copy a kineticjs sta

我写一个应用程序，其中可能有数百个帆布的页面上。 而不是对每个画布个人舞台的开销，我决定保持一个阶段的编辑。 一旦完成编辑就应该复制阶段的内容到另一个画布。

舞台提供toImage和toDataURL根据这个性能测试然而获取内容的保持，两者相比，context.drawImage这些方法会很慢。

请参阅： http://jsperf.com/copying-a-canvas-element

因为我只在一个阶段用一个层与层持有的画布，我想我可以做到这一点：

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

遗憾的是不产生任何结果（它虽然运行）

由于舞台有bufferCanvas我也尝试：

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

同样没有结果，尽管我可以在网页上看到的舞台帆布上的内容。

但是，如果我向下挖我的页面来获得由kineticjs创建和使用的实际帆布：

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

我得到的结果。 什么是kineticjs阶段的内容复制到另一个画布的正确方法？

Answer 1:

访问这样的层画布元件：

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

Answer 2:

随着kineticjs最后，更新的版本从为正确答案明显的方法行不通了。 现在我只是用下面的方法来获得kineticjs主画布 - 与jQuery的帮助：

var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);

只需更换

 #canvasDiv

与集装箱的ID。

文章来源: How to copy a kineticjs stage to another canvas