html - html5画布内的画布

Question

我们可以在现有的画布中放置一个画布吗？如果可以，请帮助在 html5 中进行。

Answer 1

有两种可能的方式来解释您的问题。一个是你的意思是实际上嵌套canvas元素本身，如下所示：

<canvas id="outer">
    <canvas id="inner"></canvas>
</canvas>

这是合法的（根据validator.nu）但毫无意义。元素内的内容canvas用于后备。使用元素内部内容的唯一方法canvas是浏览器不支持canvas，在这种情况下，canvas无论如何都不会看到内部元素。

解释您的问题的另一种可能方法是您能否在另一个画布上显示显示在一个画布上的图像。这很简单，一个canvas元素可以用作 的第一个参数context.drawImage()。如果你有两个canvas元素：

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></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);

但再说一遍，你为什么要这样做？您可以只使用一个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);

总而言之：是的，这是可能的，但在简单使用中并不是真正需要的。

Answer 2

将一个画布嵌套在另一个画布中是绝对没有意义的。如果浏览canvas器不支持canvas. 所以，就按照 robertc 说的做：
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>