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>

然后this script (using 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);

但是，为什么你呢？您可以复制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);

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

Answer 2

将画布嵌套在另一个画布中是绝对没有意义的。如果浏览器不支持canvas，则该页面只会看到canvas标记内的内容。那么，就这样做robertc说：
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>

画布里面的html5画布

2 个答案: