html5 - tuval öğesi - Birden çok katman

Herhangi bir uzantı kütüphanesi olmadan, aynı tuval öğesinde birden çok katman olması mümkün müdür?

Üst katmanda bir clearRect yaparsam, alt katmanı silmez mi?

Teşekkürler.

Hayır, ancak birden çok <canvas>öğeyi üst üste katmanlayabilir ve benzer bir şey başarabilirsiniz.

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

İlk katmanınızı layer1tuval üzerine, ikinci katmanınızı tuval üzerine çizin layer2. Daha sonra clearRectüst katmandayken, alt tuvalde ne varsa görünecektir.

Bununla ilgili:

Tuvalinizde bir şey varsa ve arkasına bir şey çizmek istiyorsanız - context.globalCompositeOperation ayarını 'hedef üzerinden' olarak değiştirerek yapabilirsiniz - ve sonra 'kaynak üzerinden' yeniden yapılır.

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

Birden fazla canvasöğeyi belgeye eklemeden oluşturabilirsiniz . Bunlar katmanlarınız olacak :

O zaman onlara istiyorum ve sonunda sadece kullanılarak hedef tuval en uygun sırayla içeriklerini işlemek ne gerekiyorsa drawImageüzerinde context.

Misal:

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

İşte kod kodları: https://codepen.io/anon/pen/mQWMMW

Ben de aynı sorunu yaşıyordum, ben pozisyon ile birden fazla tuval elemanları iken: mutlak işi yapar, eğer bir görüntüye çıktı kaydetmek istiyorsanız, bu işe yaramaz.

Bu yüzden devam ettim ve her katmanın kendi kodu varmış gibi kodlamak için basit bir katmanlama "sistemi" yaptım, ancak hepsi aynı öğeye dönüştürülüyor.

https://github.com/federicojacobi/layeredCanvas

Ekstra yetenekler eklemeyi planlıyorum, ama şimdilik yapacak.

Katmanları "sahte" yapmak için birden fazla işlev yapabilir ve bunları çağırabilirsiniz.

Ayrıca , isabet algılama, katmanlama ve diğer birçok çevresel şeyi sağlayan modern, hafif, Html5 tuval çerçevesi olan http://www.concretejs.com adresine de göz atabilirsiniz. Bunun gibi şeyler yapabilirsiniz:

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'nun bir kütüphane kullanmak istemediğini anlıyorum, ancak bunu Google aramalarından gelen diğerleri için sunacağım. @EricRowell iyi bir eklentiden bahsetti, ancak deneyebileceğiniz başka bir eklenti daha var, html2canvas .

Bizim durumumuzda, z-index"ürün oluşturucu" widget olarak katmanlı şeffaf PNG'ler kullanıyoruz . Html2canvas, görüntüleri itmeden veya karmaşıklıkları, geçici çözümleri ve "yanıt vermeyen" tuvali kullanmadan yığını kaynatmak için mükemmel bir şekilde çalıştı. Bunu vanilya tuvali + JS ile sorunsuz / aklı başında yapamadık.

z-indexGöreli konumlandırılmış bir paket içinde katmanlı içerik oluşturmak için mutlak div'larda ilk kullanım . Ardından, olduğu gibi bırakabileceğiniz veya bir istemcinin kaydedebilmesi için bir görüntü olarak çıkabileceğiniz işlenmiş bir tuval elde etmek için sargıyı html2canvas ile borulayın.

ancak katman 02, katman 01'deki tüm çizimleri kapsayacaktır. Bunu her iki katmandaki çizimi göstermek için kullandım. (arka plan rengi: şeffaf;) tarzında kullanın.

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