html5 - phần tử canvas - Nhiều lớp

Nếu không có bất kỳ thư viện mở rộng nào, có thể có nhiều lớp trong cùng một thành phần canvas không?

Vì vậy, nếu tôi thực hiện ClearRect trên lớp trên cùng, nó sẽ không xóa lớp dưới cùng?

Cảm ơn.

Tuy nhiên, không, bạn có thể xếp nhiều <canvas>yếu tố lên nhau và hoàn thành một cái gì đó tương tự.

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

Vẽ lớp đầu tiên của bạn trên layer1khung vẽ và lớp thứ hai trên layer2khung vẽ. Sau đó, khi bạn clearRectở lớp trên cùng, bất cứ thứ gì ở khung dưới sẽ hiển thị qua.

Liên quan đến điều này:

Nếu bạn có một cái gì đó trên khung vẽ của mình và bạn muốn vẽ một cái gì đó ở mặt sau của nó - bạn có thể làm điều đó bằng cách thay đổi cài đặt bối cảnh.globalCompổngOperation thành 'Destination-over' - và sau đó đưa nó trở lại 'source-over' khi bạn ' làm lại

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

Bạn có thể tạo nhiều canvasyếu tố mà không cần thêm chúng vào tài liệu. Đây sẽ là các lớp của bạn :

Sau đó, làm bất cứ điều gì bạn muốn với họ và cuối cùng chỉ cần hiển thị nội dung của họ theo đúng thứ tự tại khung hình đích sử dụng drawImagetrên context.

Thí dụ:

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

Và đây là một số codepen: https://codepen.io/anon/pen/mQWMMW

Tôi cũng gặp vấn đề tương tự, trong khi nhiều yếu tố canvas có vị trí: công việc tuyệt đối, nếu bạn muốn lưu kết quả đầu ra vào hình ảnh, điều đó sẽ không hiệu quả.

Vì vậy, tôi đã tiếp tục và thực hiện một "hệ thống" phân lớp đơn giản để mã hóa như thể mỗi lớp có mã riêng, nhưng tất cả được kết xuất thành cùng một phần tử.

https://github.com/federicojacobi/layeredCanvas

Tôi dự định thêm các khả năng bổ sung, nhưng bây giờ nó sẽ làm được.

Bạn có thể thực hiện nhiều chức năng và gọi chúng để các lớp "giả".

Bạn cũng có thể kiểm tra http://www.concittlejs.com , một khung vải Html5 hiện đại, gọn nhẹ, cho phép phát hiện, đánh lớp và nhiều thứ ngoại vi khác. Bạn có thể làm những việc như thế này:

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

Tôi hiểu rằng Q không muốn sử dụng thư viện, nhưng tôi sẽ cung cấp dịch vụ này cho những người khác đến từ các tìm kiếm của Google. @EricRowell đã đề cập đến một plugin tốt, nhưng, cũng có một plugin khác bạn có thể thử, html2canvas .

Trong trường hợp của chúng tôi, chúng tôi đang sử dụng các PNG trong suốt được xếp lớp với z-indextư cách là tiện ích "trình tạo sản phẩm". Html2canvas đã làm việc tuyệt vời để đun sôi ngăn xếp xuống mà không đẩy hình ảnh, cũng không sử dụng độ phức tạp, cách giải quyết và bản thân khung vẽ "không phản hồi". Chúng tôi không thể thực hiện điều này một cách trơn tru / lành mạnh với khung vẽ vanilla + JS.

Đầu tiên sử dụng z-indextrên div tuyệt đối để tạo nội dung lớp trong một trình bao bọc được định vị tương đối. Sau đó, đưa trình bao bọc qua html2canvas để có được một khung vẽ được hiển thị, mà bạn có thể để nguyên trạng hoặc xuất ra dưới dạng hình ảnh để khách hàng có thể lưu nó.

nhưng lớp 02, sẽ bao gồm tất cả các bản vẽ trong lớp 01. Tôi đã sử dụng nó để hiển thị bản vẽ trong cả hai lớp. sử dụng (màu nền: trong suốt;) trong phong cách.

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