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

标签 javascript kineticjs

我正在编写一个页面上可能有数百个 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();

这是感兴趣的文档:

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

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

关于javascript - 如何将 kineticjs 舞台复制到另一个 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13615387/

相关文章:

javascript - 清除容器所有输入元素的值

javascript - 避免在 JavaScript 中使用魔数(Magic Number) - 与 JsHint 一起使用的替代方案

javascript - 如何在 KineticJS Wedge 中垂直居中文本?

javascript - 唯一识别 KineticJS 形状

javascript - 形状的 KineticJS 周边碰撞检测

javascript - 如何使用 jQuery 创建多个 HTML 元素?

javascript - 自定义滚动条

javascript - 在 JavaScript 中转义 HTML 实体?

javascript - kinetic js HTML5 Canvas 中的 stage.toJSON()

javascript - createImageHitRegion 不随图像对象缩放