在 <canvas> 中放置 <div>答案

【问题标题】：Placing a <div> within a <canvas>在 <canvas> 中放置 <div>
【发布时间】：2011-04-23 11:28:00
【问题描述】：

我在canvas 元素中使用div，如下所示：

<canvas>
    <div></div>
</canvas>

这里它们都有高度和宽度。但是这里看不到div！

不能在canvas 中使用div 或p 吗？

【问题讨论】：

标签： html canvas

【解决方案1】：

您不能将元素放置在画布内（并同时显示）；仅当浏览器不理解 canvas 元素时才会显示它们。

如果您想将元素放置在与画布相同的区域，这里有一种技术（在众多技术中）可以让您做到这一点：

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Make this a positioned parent */
#overlay     { position:absolute; top:20px; left:30px; }

这是另一种技术，它可以让 div 的内容正常流动，并使画布成为内容的背景：

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }

【讨论】：

@BharatPatil 没有人关心 IE9。市场份额低于3%。这只是 IE 版本的 3%，所以如果你算在所有浏览器中，它会更少。
一年后，根据netmarketshare.com/… IE9 占据了总桌面市场份额的6.67%。
IE8、9 和 10 已于 2016 年 1 月结束生命周期，这意味着 Microsoft 不支持它们，除非根据特定的延长寿命许可证并且没有安全补丁。到 2018 年底，你可能会忽略它们，除非你为一家你知道仍然拥有它们的企业工作。当然，IE11 还活着。 microsoft.com/en-gb/windowsforbusiness/end-of-ie-support