Html5 - элемент холста - несколько слоев

Ответ 1

Нет, однако, вы можете сложить несколько элементов <canvas> друг над другом и выполнить что-то подобное.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Нарисуйте свой первый слой на холсте layer1, а второй - на холсте layer2. Затем, когда вы clearRect на верхнем слое, все, что на нижнем холсте будет показано.

Ответ 2

В связи с этим:

Если у вас есть что-то на вашем холсте, и вы хотите нарисовать что-то сзади, вы можете сделать это, изменив параметр context.globalCompositeOperation на "destination-over" - и затем верните его в "исходный", когда вы закончите.

var co = document.getElementById('cvs').getContext('2d');

// Draw a red square

co.fillStyle = 'red';
co.fillRect(50,50,100,100);



// Change the globalCompositeOperation to destination-over so that anything
// that is drawn on to the canvas from this point on is drawn at the back
// of whats already on the canvas

co.globalCompositeOperation = 'destination-over';



// Draw a big yellow rectangle

co.fillStyle = 'yellow';
co.fillRect(0,0,600,250);


// Now return the globalCompositeOperation to source-over and draw a
// blue rectangle

co.globalCompositeOperation = 'source-over';

co.fillStyle = 'blue';
co.fillRect(75,75,100,100);

Ответ 3

Вы можете создать несколько элементов canvas, не добавляя их в документ. Это будут ваши слои:

Затем сделайте то, что вы хотите с ними, и в конце просто разместите их содержимое в правильном порядке на холсте назначения с помощью drawImage на context.

Ответ 4

У меня тоже была эта проблема, я несколько элементов холста с позицией: absolute выполняет задание, если вы хотите сохранить вывод в изображение, что не будет работать.

Итак, я пошел вперед и сделал простую систему "расслоения" для кода, как будто у каждого слоя был свой собственный код, но все это визуализируется в один и тот же элемент.

https://github.com/federicojacobi/layeredCanvas

Я намерен добавить дополнительные возможности, но на данный момент это будет делать.

Вы можете выполнять несколько функций и вызывать их для "подделки" слоев.

Ответ 5

Вы также можете проверить http://www.concretejs.com, которая представляет собой современную, легковесную структуру холстов Html5, которая позволяет обнаруживать попадание, расслоение и множество других периферийными вещами. Вы можете делать такие вещи:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);

// reorder layers
layer1.moveUp();

// destroy a layer
layer1.destroy();

Ответ 6

Я понимаю, что Q не хочет использовать библиотеку, но я предлагаю это для других, поступающих из поисковых запросов Google. @EricRowell упомянул хороший плагин, но есть еще один плагин, который вы можете попробовать, html2canvas.

В нашем случае мы используем многослойный прозрачный PNG с z-index в качестве виджета "product builder". Html2canvas работал блестяще, чтобы кипятить стек, не нажимая изображения, не используя сложности, обходные пути и сам "невосприимчивый" холст. Мы не смогли сделать это плавно/разумно с ванильным холстом + JS.

Сначала используйте z-index в абсолютных divs для создания многоуровневого содержимого в относительной позиционной оболочке. Затем проведите оболочку через html2canvas, чтобы получить рендер-холст, который вы можете оставить как есть, или вывести его как изображение, чтобы клиент мог его сохранить.