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상단 레이어에 있을 때 하단 캔버스에있는 모든 내용이 표시됩니다.

이것과 관련하여 :

캔버스에 무언가가 있고 그 뒤에 무언가를 그리려면 context.globalCompositeOperation 설정을 'destination-over'로 변경하여 할 수 있습니다-그리고 'source-over' 다시.

   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에 on을 사용하여 대상 캔버스에서 내용을 올바른 순서로 렌더링하십시오 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

나는 같은 문제가 있었지만 position : absolute가있는 여러 캔버스 요소가 작업을 수행하지만 출력을 이미지에 저장하려는 경우 작동하지 않습니다.

각 레이어마다 고유의 코드가있는 것처럼 코딩하기 위해 간단한 계층화 "시스템"을 수행했지만 모두 동일한 요소로 렌더링됩니다.

https://github.com/federicojacobi/layeredCanvas

추가 기능을 추가하려고하지만 지금은 가능합니다.

레이어를 "가짜"만들기 위해 여러 기능을 수행하고 호출 할 수 있습니다.

또한 히트 감지, 계층화 및 기타 많은 주변 장치를 가능하게하는 현대적이고 가벼운 Html5 캔버스 프레임 워크 인 http://www.concretejs.com 을 확인 하십시오 . 다음과 같은 작업을 수행 할 수 있습니다.

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

우리의 경우 z-index에는 "제품 빌더"위젯으로 레이어 투명 PNG를 사용 하고 있습니다. Html2canvas는 이미지를 밀거나 복잡성, 해결 방법 및 "무응답"캔버스 자체를 사용하지 않고 스택을 끓이기 위해 훌륭하게 작동했습니다. 우리는 바닐라 캔버스 + JS로 이것을 매끄럽게 / 제정신으로 할 수 없었습니다.

z-index절대 div를 먼저 사용 하여 상대적으로 배치 된 래퍼 내에 계층화 된 컨텐츠를 생성하십시오. 그런 다음 래퍼를 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>