html5 div在canvas的上下文中

Question

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

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

Answer 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>

希望这有帮助。

Answer 2

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

如果你想使用画布显示div并使用画布绘制它们，你必须使用定位来展示它们。