画布上下文中的html5 div答案

【问题标题】：html5 div inside a context of canvas画布上下文中的html5 div
【发布时间】：2012-01-14 04:05:14
【问题描述】：

我开始在我的网站上使用 html5 画布对象，我想在画布上绘制矩形（或根据我的应用程序的其他形状）。我可以使用上下文对象在矩形上写文本。

我想要做的是我想在矩形中放置一个 div 元素。因此，我可以在画布上对对象进行语义处理，例如在矩形内放置段落和边框等，在对象中存储一些琐碎的数据。那可能吗？

【问题讨论】：

【解决方案1】：

canvas 标签内没有任何内容，除了在浏览器不支持 HTML5 和画布时将显示的元素。如果您想在 DIV 中显示常规 HTML 元素，您可以简单地将其绝对定位，使其漂浮在画布上方：

<canvas height="100" width="200" style="position:absolute;left:10;top:10"></canvas>

<div id="yourDiv" style="position:absolute;left:20;top:20">Your content</div>

希望这会有所帮助。

【讨论】：

例如，我在画布内绘制了 4 个矩形，我想在其中存储一些信息，例如矩形的名称、矩形的描述、它对应的一些 id db 表中的行。我可以将详细信息存储在画布元素中吗？例如，您可以在 WPF 中执行此操作。还是我必须将它们存储在 Javascript 中？
画布用于绘图，因此我认为没有任何元数据可以与您绘制的任何元素相关联。您必须在 JavaScript 中执行此操作。

【解决方案2】：

不支持画布的旧版浏览器应该显示这些 div。正如您可以轻松尝试的那样，其他浏览器会将 div 存储在您的 dom 树中，但不会显示它。所以你应该能够做一些 dom 语义，但是你必须在你的画布上为支持它的浏览器绘制它们。

如果要显示 div 并使用画布在其上绘制，则必须使用定位来显示它们。

【讨论】：