我正在编写一个页面上可能有数百个 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 的正确方法是什么?
最佳答案
像这样访问图层 Canvas 元素:
var canvasElement = layer.getCanvas().getElement();
上下文是这样的:
var context = layer.getCanvas().getContext();
这是感兴趣的文档:
关于javascript - 如何将 kineticjs 舞台复制到另一个 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13615387/