HTML5中的画布内嵌画布

Question

我们可以在现有的canvas中放置另一个canvas吗？如果可以，请帮忙在html5中完成。

- Villan

---

请提供更多细节，以便了解您实际想要完成的目标。 - Phrogz

Answer 1

您的问题有两种可能的解释。一种是您想要实际嵌套canvas元素本身，像这样：

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

根据validator.nu，这是合法的，但没有意义。 canvas元素内部的内容是备用的。只有当浏览器不支持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来复制上面第二个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);

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

- robertc

---

使用第二个画布有很多（尽管不是微不足道的）原因。例如，绘制移动图表最好通过将图表复制到另一个离屏画布上来完成，清除主画布，然后将离屏画布向左偏移一个像素并在缺失列中绘制新数据。 （仅在图表背景透明时才需要这样做。） - Phrogz

@Phrogz 是的，还有各种图像处理方面的东西。但我仍然坚持我的观点，“在简单使用中这并不是必需的”，我认为所有这些东西都与这个问题或答案无关。 - robertc

也许不会，但新手可能会误解你的措辞意味着它是过度的，而事实上这通常是更整洁和更优化的完成某些任务的方式。如果有一个带有静态元素（比如游戏）的不断变化的画布，使用这种技术可以带来巨大的性能优势 - 你只需要将位图/矢量绘制到画布一次，然后在更新时简单地将其绘制到主画布上即可。虽然答案很好，但我还要给你点赞。 - MickMalone1983

它可以用于打印标签或照片的情况。就像外部画布内部包含多个相似类型的内部画布一样。内部画布包含文本或照片。尝试使用canvas的createPattern()函数来实现此目的。 - sms

Answer 2

在另一个画布中嵌套画布是完全没有意义的。如果浏览器不支持canvas，页面只能看到canvas标签内的内容。所以，就像robertc说的那样做：
<canvas id="background">回退/填充放在这里...</canvas> <canvas id="foreground">...或者放在这里，但不能放在其他画布中。</canvas>

- DUUUDE123