html5 - องค์ประกอบผ้าใบ - หลายชั้น

หากไม่มีไลบรารีส่วนขยายเป็นไปได้หรือไม่ที่จะมีหลายชั้นในองค์ประกอบ Canvas เดียวกัน

ดังนั้นถ้าฉันทำ 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อยู่ที่ชั้นบนสุดสิ่งที่อยู่บนผืนผ้าใบด้านล่างจะแสดงผ่าน

เกี่ยวข้องกับเรื่องนี้:

หากคุณมีบางอย่างบนผืนผ้าใบของคุณและคุณต้องการวาดบางสิ่งที่ด้านหลัง - คุณสามารถทำได้โดยเปลี่ยนการตั้งค่าบริบท เสร็จสิ้นอีกครั้ง

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

และนี่คือ codepen บางส่วน: 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 html2canvas

ในกรณีของเราเราใช้ PNG โปร่งใสแบบเลเยอร์ z-indexเป็นเครื่องมือ "ตัวสร้างผลิตภัณฑ์" Html2canvas ทำงานได้อย่างยอดเยี่ยมในการต้มกองซ้อนโดยไม่ต้องกดภาพหรือใช้ความซับซ้อนการแก้ปัญหาและผืนผ้าใบ "ที่ไม่ตอบสนอง" เราไม่สามารถทำสิ่งนี้ได้อย่างราบรื่น / มีสติด้วยผ้าใบวานิลลา + JS

ใช้งานครั้งแรกz-indexบน divs แบบสัมบูรณ์เพื่อสร้างเนื้อหาแบบเลเยอร์ภายใน wrapper ตำแหน่งที่สัมพันธ์กัน จากนั้นไพพ์เสื้อคลุมผ่าน 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>