Z- 색인으로이 캔버스 요소를 정렬하는 방법은 무엇입니까?

Question

이 캔버스를 가장 큰 z- 인덱스가있는 캔버스로 병합하고 싶습니다.

<div id="sketchpad_container"> 
    <canvas id="sketchypad_layer_0" style="z-index: 20; " width="800" height="600">Your browser does not support canvas</canvas> 
    <canvas id="sketchypad_layer_1" style="z-index: 10; " width="800" height="600">Your browser does not support canvas</canvas> 
    <canvas id="sketchypad_layer_2" style="z-index: 30; " width="800" height="600">Your browser does not support canvas</canvas> 
</div> 

내가 Z- 인덱스를 기준으로 정렬 할 모조 층의 임의의 수를 감안하고이를 수출하기 위해 하나 개의 이미지로 결합하는 drawImage 메소드를 사용합니다. Z- 색인으로 정렬하기가 쉬운가요?

EDIT - 제안 된대로 정렬 기능을 시도했지만 작동하지 않는 것 같습니다.

$("#sketchpad_container canvas"); //see what's in the collection 
//console output gives back (you'll notice z-indices are 40, 20, 10, 30) 
[ 
    <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​, 
    <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​ 
] 

//next try to sort the collection 
$("#sketchpad_container canvas").toArray().sort(function(a,b){a.style.zIndex - b.style.zIndex}); 
//but array is still the same order of z-index 40, 20, 10, 30. 
// I was expecting 40,30,20,10 
[ 
    <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​, 
    <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
    <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​ 
    ] 

내가 잘못 뭐하는 거지 : 여기

내 콘솔 출력입니까?

EDIT AGAIN - 오, 신경 쓰지 마세요. 나는 "return"진술을 포함시킬 필요가있다. 가!

Answer 1

가정의 모든 캔버스 요소가 Z- 인덱스를 설정하는 할당 된 스타일의 값이,이 같은 Z- 인덱스에 의해 정렬 된 모든 캔버스 요소의 배열을 얻을 수 있습니다 :

var items = $("#sketchpad_container canvas").toArray(); 
items.sort(function(a, b) { 
    return(Number(a.style.zIndex) - Number(b.style.zIndex)); 
}); 

을 당신은 아마도 다음 수 해당 배열을 반복하여 drawImage()을 호출합니다. 올바른 z 순서 렌더링을 위해서는 위의 정렬에 따라 배열의 처음부터 끝까지 그릴 것을 의미하는 백 이미지 (가장 낮은 z- 인덱스 항목)를 먼저 그려야합니다.