html5-캔버스 요소-여러 레이어

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 co = document.getElementById('cvs').getContext('2d');

// Draw a red square

co.fillStyle = 'red';
co.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 whats already on the canvas

co.globalCompositeOperation = 'destination-over';



// Draw a big yellow rectangle

co.fillStyle = 'yellow';
co.fillRect(0,0,600,250);


// Now return the globalCompositeOperation to source-over and draw a
// blue rectangle

co.globalCompositeOperation = 'source-over';

co.fillStyle = 'blue';
co.fillRect(75,75,100,100);

---

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

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

You can do multiple functions and call them in order to "fake" layers.

---

You might also checkout http://www.concretejs.com which is a modern, lightweight, Html5 canvas framework that enables hit detection, layering, and lots of other peripheral things. You can do things like this:

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

---

I understand that the Q does not want to use a library, but I will offer this for others coming from Google searches. @EricRowell mentioned a good plugin, but, there is also another plugin you can try, html2canvas.

In our case we are using layered transparent PNG's with z-index as a "product builder" widget. Html2canvas worked brilliantly to boil the stack down without pushing images, nor using complexities, workarounds, and the "non-responsive" canvas itself. We were not able to do this smoothly/sane with the vanilla canvas+JS.

First use z-index on absolute divs to generate layered content within a relative positioned wrapper. Then pipe the wrapper through html2canvas to get a rendered canvas, which you may leave as-is, or output as an image so that a client may save it.

참고URL : https://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers