javascript 如何使用多个画布上下文？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8466519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use multiple canvas contexts?
提问by Danny Fox
I would like to use experimental-webgl, and the 2dcanvas context also. After I've drawn the 3d objects, I want to draw some 2d objects over it.
我想使用experimental-webgl, 以及2d画布上下文。绘制 3d 对象后，我想在其上绘制一些 2d 对象。
How should I do it?
我该怎么做？
采纳答案by bennedich
You need a separate canvas. You can put the other canvas over the first one, this is not considered bad practice.
你需要一个单独的画布。您可以将另一个画布放在第一个画布上，这不被认为是不好的做法。
回答by pimvdb
You cannot use multiple contexts for one canvas element. In WebKit, this is explicitly mentioned in the source:
您不能为一个画布元素使用多个上下文。在 WebKit 中，源代码中明确提到了这一点：
// A Canvas can either be "2D" or "webgl" but never both.
If you do request another context, you get null:
如果您确实请求另一个上下文，则会得到null：
if ((type == "webkit-3d") ||
(type == "experimental-webgl")) {
if (m_context && !m_context->is3d())
return 0;
(So if you request a 3D context when you already have another context, you get null.)
（因此，如果您在已有另一个上下文时请求 3D 上下文，则会得到null。）
What you probably want is two canvas elements - one for 3D stuff and the other one for 2D stuff. If you place them over each other, they act as two layers, and you can draw on each canvas independently.
您可能想要的是两个画布元素 - 一个用于 3D 内容，另一个用于 2D 内容。如果您将它们叠放在一起，它们将充当两个图层，您可以独立地在每个画布上绘图。
