Html html5 画布内的画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11625767/
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
Canvas inside canvas of html5
提问by Villan
Can we place a canvas inside the existing canvas?If we can,please help to do it in html5.
我们可以在现有的画布中放置一个画布吗？如果可以，请帮忙在 html5 中做。
回答by robertc
There are two possible ways to interpret your question. One is that you mean to actually nest canvaselements themselves, like this:
有两种可能的方式来解释您的问题。一是您的意思是实际嵌套canvas元素本身，如下所示：
<canvas id="outer">
<canvas id="inner"></canvas>
</canvas>
This is legal (according to validator.nu) but pointless. The content inside the canvaselement is for fallback. The only way the content inside the canvaselement gets used is if the browser doesn't support canvas, in which case the inner canvaselement won't be seen anyway.
这是合法的（根据validator.nu）但毫无意义。canvas元素内的内容用于回退。canvas元素内的内容被使用的唯一方法是浏览器不支持canvas，在这种情况下，canvas无论如何都看不到内部元素。
The other possible way to interpret your question is can you display the image shown on one canvas within another. This is quite straightforward, a canvaselement can be used as the first parameter to context.drawImage(). If you have two canvaselements:
解释您的问题的另一种可能方法是，您能否将一个画布上显示的图像显示在另一个画布上。这很简单，一个canvas元素可以用作第一个参数context.drawImage()。如果你有两个canvas元素：
<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
Then this script (using jQuery)will draw on the first canvasand then add that four times as an image to the second canvas:
然后这个脚本（使用 jQuery）将在第一个上绘制canvas，然后将其四次作为图像添加到第二个canvas：
var c1 = $('#c1');
var ctx1 = c1[0].getContext('2d');
ctx1.fillRect(50,50,100,100);
var c2 = $('#c2');
var ctx2 = c2[0].getContext('2d');
ctx2.drawImage(c1[0],0,0,100,100);
ctx2.drawImage(c1[0],100,0,100,100);
ctx2.drawImage(c1[0],0,100,100,100);
ctx2.drawImage(c1[0],100,100,100,100);
But again, why would you? You can replicate the image of the second canvasabove just using one:
但话说回来，你为什么要这样做？您可以仅使用一个来复制canvas上面第二个的图像：
var c1 = $('#c1');
var ctx1 = c1[0].getContext('2d');
ctx1.fillRect(25,25,50,50);
ctx1.fillRect(125,25,50,50);
ctx1.fillRect(25,125,50,50);
ctx1.fillRect(125,125,50,50);
So in summary: yes, it's possible, but it's not really necessary in simple use.
所以总而言之：是的，这是可能的，但在简单使用中并不是真正必要的。
回答by DUUUDE123
It would be absolutely pointless to nest a canvas inside of another canvas. The page only sees what is inside the canvastag if the browser doesn't support the canvas. So, just do what robertc said:
<canvas id="background">fallbacks/polyfills go in here...</canvas>
<canvas id="foreground">.. or here, but not other canvases.</canvas>
将一个画布嵌套在另一个画布中是绝对没有意义的。该页面只看到什么是内canvas标签，如果浏览器不支持canvas。所以，只要按照 robertc 说的去做：
<canvas id="background">fallbacks/polyfills go in here...</canvas>
<canvas id="foreground">.. or here, but not other canvases.</canvas>
