如何将 webkit 转换的画布合二为一？答案

【问题标题】：How to draw webkit-transformed canvases into one?如何将 webkit 转换的画布合二为一？
【发布时间】：2012-02-01 07:19:20
【问题描述】：

我有一个 div，其中包含 6 个应用了不同 webkit transromations 的画布，我想将此 div 的内容“绘制”到一个画布中（“截取”此 div 的屏幕截图）。但似乎会有点棘手，因为无法将 div 直接绘制到画布中，并且当我尝试将转换后的画布绘制到另一个画布时，不会应用 webkit 转换。

是否可以使用画布转换（缩放、平移等）正确绘制这些画布？是否有任何好的库可以帮助您将 3d 转换转换为 2d？提前致谢。

【问题讨论】：

标签： html canvas webkit-transform

【解决方案1】：

无法将div 的内容捕获为图像，但您可以使用父画布并将其他画布绘制到其中。您可以使用父画布上下文的 drawImage 方法并将源画布作为图像参数传递。

通过设置目标上下文with the methods defined here 的转换，您可以定义您想要的任何仿射转换（缩放、平移、旋转 - 但不是透视）。

【讨论】：

是的，我知道。但由于某些原因，我不能使用父画布。还是谢谢你的回答。
为什么不能用？如果您在文档中有另一个画布，它是父级并且您获得了它的 2D 上下文，您应该能够将其他画布绘制到其中，就好像它们是图像一样（您可以使用 drawImage(<other_canvas>, <x>, <y>)
因为我需要绘制的画布是使用 webkit 转换进行转换的，当我将它们绘制到另一个画布中时，这些转换不会应用。
好的，但我是说您可以将相同（或等效）的转换应用于 Canvas 上下文，然后绘制其他画布以获得相同的结果。
看看我上面的问题 :) 我正在寻找一个库或技术来帮助您将所有 3d 转换转换为 2d，以便我可以使用画布方法（翻译、缩放等）应用它们并实现我的目标。