HTML5 Div внутри контекста холста

Question

Я начал использовать объект холста html5 на своем веб-сайте и хочу рисовать прямоугольники (или другие фигуры в соответствии с моим приложением) на холсте.Я могу написать текст на прямоугольниках, используя объект контекста.

То, что я пытаюсь сделать, это то, что я хочу поместить элемент div в прямоугольник.Таким образом, я могу семантически работать с моими объектами на холсте, например помещать абзац и границу внутри прямоугольника и т. Д., Сохраняя некоторые тривиальные данные в объектах.Это возможно?

Answer 1

Внутри тега canvas ничего не идет, кроме элементов, которые будут отображаться, если браузер не поддерживает HTML5 и canvas.Если вы хотите отобразить обычные HTML-элементы в DIV, вы можете просто расположить их абсолютно так, чтобы они плавали над холстом:

<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 в вашем дереве dom, но не отображать его. Так что вы должны быть в состоянии сделать некоторые семантики dom, но вам придется рисовать их на холсте для браузеров, поддерживающих его.

Если вы хотите показать элементы div и рисовать на них, используя холст, вам придется использовать позиционирование, чтобы показывать их друг над другом.