Нарисуйте фигуры / текст на холсте, используя слои или z-index

Question

Я рисую несколько текстовых элементов, используя цикл for. Но я хочу, чтобы первый элемент был нарисован поверх всех остальных элементов. Кроме реверсирования цикла, есть ли способ определить номер слоя для нарисованного элемента, такого как текст или фигуры?

Answer 1

Нет, HTML5 Canvas, как и SVG, использует при рисовании «модель художника» : чернила, которые вы кладете, сразу высыхают на холсте;последовательные вызовы отрисовки идут поверх результата.

Кроме того, HTML5 Canvas - в отличие от SVG или HTML - использует не сохраняемый (или немедленный) графический режим :никакие объекты не сохраняются в соответствии с исходными командами рисования после их выдачи.

Возможны следующие варианты:

• Изменить ваш цикл или иным образом внедрить собственную систему наложения, котораяставит в очередь вызовы отрисовки, а затем выдает их в порядке снизу вверх.

• Как подсказывает @Stoive, программно создайте отдельные (неотображаемые) элементы холста, отрисуйте их и затем скопируйтерезультаты возвращаются на ваш основной холст в нужном вам порядке.

• Создание нескольких (отображаемых) холстов на странице и нанесение их слоями с использованием CSS с использованием каждого слоя как отдельного.

Последний вариант предоставляет вам наибольшую свободу, включая возможность в любой момент очистить / очистить только один из слоев или изменить порядок слоев без необходимости повторной компоновки.Вы сами.

Answer 2

В 2D-контексте нет понятия слоев в canvas - его можно представить как программируемое приложение, похожее на кисть.

Однако можно нарисовать один холст на другом, используя context.drawImageтак что если вы сохраняете каждый «слой» на своем собственном холсте, а затем объединяете их в один для отображения, вы можете эмулировать концепцию слоев.