Вложенные элементы CANVAS

Question

Возможно ли иметь элемент внутри другого элемента? Я знаю, что могу их наслоить, но возможно ли это -

<canvas id="parent">
    <canvas id="child"></canvas>
</canvas>

Я пытался, но, похоже, не работает.

Answer 1

Спецификация canvas не допускает этого. Элемент canvas может использоваться во встроенном контенте контента; вложение элемента canvas помещает его в резервный контекст содержимого, который не поддерживается.

Answer 2

Если вы хотите обрабатывать фон и передний план отдельно, вы можете использовать два холста и поместить один над другим с помощью css.

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
</canvas>

На самом деле это один из советов по улучшению производительности холста. Источник: HTML5 Скалы

Answer 3

Вы можете, как сказал Исаак Сепеда в своем ответе, иметь разные идентификаторы холста и индексы z.Вам также нужно назвать почти все переменные и функции для каждого холста как-то по-другому, чтобы вы не рисовали на холсте A, когда хотите рисовать на холсте B.

Answer 4

Возможно, вы захотите сделать виртуальное встраивание, переводя различные позиции на холсте.

Вот пример этого:

http://marketimpacts.com/storage/9781118385357%20ls0702%20Complex%20Objects.htm

Это из:

http://www.amazon.com/HTML5-Canvas-For-Dummies-Cowan/dp/1118385357/ref=cm_cmu_up_thanks_hdr