html5 - елемент полотна - Кілька шарів

Чи можливо без бібліотеки розширень мати кілька шарів в одному елементі полотна?

Тож якщо я виконаю clearRect на верхньому шарі, він не видалить нижній?

Дякую.

Ні, однак, ви можете накласти кілька <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на верхньому шарі, все, що є на нижньому полотні, буде показано наскрізь.

Пов’язане з цим:

Якщо у вас є щось на полотні, і ви хочете намалювати щось на задній панелі - ви можете це зробити, змінивши налаштування контексту.globalCompositeOperation на «призначення-над», а потім повернути його на «джерело-над», коли ви » зроблено.

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

    // Draw a red square
    context.fillStyle = 'red';
    context.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 what's already on the canvas
    context.globalCompositeOperation = 'destination-over';



    // Draw a big yellow rectangle
    context.fillStyle = 'yellow';
    context.fillRect(0,0,600,250);


    // Now return the globalCompositeOperation to source-over and draw a
    // blue rectangle
    context.globalCompositeOperation = 'source-over';

    // Draw a blue rectangle
    context.fillStyle = 'blue';
    context.fillRect(75,75,100,100);

<canvas id="cvs" />

Можна створити кілька canvasелементів, не додаючи їх до документа. Це будуть ваші шари :

Тоді робити все , що ви хочете з ними і в кінці кінців просто роблять їх утримання в належному порядку на цільовому полотні , використовуючи drawImageна context.

Приклад:

/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);

/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);

/* virtual canvase 2 - not appended to the DOM */    
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)

/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);

А ось і кілька коден: https://codepen.io/anon/pen/mQWMMW

У мене була ця сама проблема, я, хоча кілька елементів полотна з позицією: абсолют робить роботу, якщо ви хочете зберегти вихід у зображення, це не спрацює.

Тому я пішов вперед і зробив просту багатошарову "систему", щоб кодувати так, ніби кожен шар мав свій код, але все це перетворюється в один і той же елемент.

https://github.com/federicojacobi/layeredCanvas

Я маю намір додати додаткові можливості, але поки це зробить.

Ви можете виконувати кілька функцій і викликати їх, щоб "підробити" шари.

Ви також можете замовити 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();

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

У нашому випадку ми використовуємо шаруваті прозорі PNG з z-indexвіджетом "конструктор продуктів". Html2canvas блискуче працював над тим, щоб звести стек вниз, не підштовхуючи зображення, не використовуючи складності, обхідні шляхи та саме "невідповідальне" полотно. Ми не змогли зробити це плавно / здорово за допомогою ванільного полотна + JS.

Спочатку використовуйте z-indexабсолютні знаки, щоб генерувати шаруватий вміст у відносно розташованій обгортці. Потім передайте обгортку через html2canvas, щоб отримати відтворене полотно, яке ви можете залишити як є, або вивести у вигляді зображення, щоб клієнт міг зберегти його.

але шар 02 буде охоплювати всі малюнки в шарі 01. Я використовував це, щоб показати малюнок в обох шарах. використання (колір фону: прозорий;) у стилі.

    <div style="position: relative;"> 
      <canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
      </canvas> 
      <canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
      </canvas>
</div>