html5 - elemen kanvas - Beberapa lapisan

Tanpa pustaka ekstensi, mungkinkah memiliki beberapa lapisan dalam elemen kanvas yang sama?

Jadi jika saya melakukan clearRect pada lapisan atas, itu tidak akan menghapus yang bawah?

Terima kasih.

Tidak, bagaimanapun, Anda dapat melapisi banyak <canvas>elemen di atas satu sama lain dan mencapai sesuatu yang serupa.

<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>

Gambarlah lapisan pertama Anda di layer1kanvas, dan lapisan kedua di layer2kanvas. Kemudian ketika Anda clearRectberada di lapisan atas, apa pun yang ada di kanvas bawah akan terlihat.

Terkait dengan ini:

Jika Anda memiliki sesuatu di kanvas dan ingin menggambar sesuatu di belakangnya - Anda dapat melakukannya dengan mengubah konteks.globalCompositeOperasi pengaturan ke 'tujuan-lebih' - dan kemudian mengembalikannya ke 'sumber-lebih' ketika Anda ' sudah selesai.

   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" />

Anda dapat membuat banyak canvaselemen tanpa menambahkannya ke dalam dokumen. Ini akan menjadi layer Anda :

Kemudian melakukan apapun yang Anda inginkan dengan mereka dan pada akhirnya hanya membuat konten mereka dalam urutan yang benar di kanvas tujuan menggunakan drawImagedi context.

Contoh:

/* 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);

Dan inilah beberapa codepen: https://codepen.io/anon/pen/mQWMMW

Saya juga mengalami masalah yang sama, saya sementara beberapa elemen kanvas dengan posisi: absolut melakukan pekerjaan, jika Anda ingin menyimpan output ke dalam gambar, itu tidak akan berhasil.

Jadi saya pergi ke depan dan melakukan layering "sistem" sederhana untuk mengkodekan seolah-olah setiap lapisan memiliki kode sendiri, tetapi semuanya akan dirender ke dalam elemen yang sama.

https://github.com/federicojacobi/layeredCanvas

Saya berniat untuk menambah kemampuan tambahan, tetapi untuk sekarang ini akan berhasil.

Anda dapat melakukan banyak fungsi dan memanggilnya untuk lapisan "palsu".

Anda mungkin juga checkout http://www.concretejs.com yang merupakan kerangka kanvas Html5 modern, ringan yang memungkinkan deteksi hit, layering, dan banyak hal periferal lainnya. Anda dapat melakukan hal-hal seperti ini:

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();

Saya mengerti bahwa Q tidak ingin menggunakan perpustakaan, tetapi saya akan menawarkan ini untuk orang lain yang berasal dari pencarian Google. @EricRowell menyebutkan plugin yang bagus, tapi, ada juga plugin lain yang bisa Anda coba, html2canvas .

Dalam kasus kami, kami menggunakan z-indexwidget PNG berlapis transparan dengan sebagai "pembangun produk". Html2canvas bekerja dengan cemerlang untuk merebus tumpukan tanpa mendorong gambar, atau menggunakan kompleksitas, solusi, dan kanvas "non-responsif" itu sendiri. Kami tidak dapat melakukan ini dengan lancar / waras dengan kanvas vanilla + JS.

Pertama digunakan z-indexpada div absolut untuk menghasilkan konten berlapis dalam pembungkus posisi relatif. Kemudian pipa pembungkus melalui html2canvas untuk mendapatkan kanvas yang diberikan, yang dapat Anda biarkan apa adanya, atau output sebagai gambar sehingga klien dapat menyimpannya.

tapi layer 02, akan mencakup semua gambar di layer 01. Saya menggunakan ini untuk menunjukkan gambar di kedua layer. gunakan (warna latar: transparan;) dalam gaya.

    <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>