html5 – элемент canvasа – несколько слоев

Без какой-либо библиотеки расширений возможно ли иметь несколько слоев в одном и том же элементе canvasа?

Итак, если я делаю clearRect на верхнем слое, он не будет удалять нижний?

Благодарю.

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

 

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

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

Если у вас есть что-то на вашем canvasе, и вы хотите что-то нарисовать сзади, вы можете сделать это, изменив параметр context.globalCompositeOperation на «destination-over» – и затем верните его в «source-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); 

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

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

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

Поэтому я пошел вперед и сделал простую систему «упорядочивания» кода, как будто каждый слой имел свой собственный код, но все это визуализируется в один и тот же элемент.

https://github.com/federicojacobi/layeredCanvas

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

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

Вы также можете проверить http://www.concretejs.com, который представляет собой современную, легковесную структуру canvasов 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(); 

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

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

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

Давайте будем гением компьютера.