我想将这些 Canvas 合并为一个最大的 z-index 在上面。
<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>
给定任意数量的此类 Canvas 层，我想按 z-index 排序，然后使用 drawImage 将它们组合成一个图像以便导出。是否有按 z-index 排序的简单方式？
编辑 - 我按照建议尝试了排序功能，但似乎不起作用。
这是我的控制台输出:
$("#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>
]
我做错了什么？
再次编辑——哦，没关系。我需要包括一个“返回”声明。啊!
最佳答案
假设您所有的 Canvas 元素都有一个指定的样式值来设置它们的 z-index，您可以获得一个按 z-index 排序的所有 Canvas 元素的数组，如下所示:
var items = $("#sketchpad_container canvas").toArray();
items.sort(function(a, b) {
return(Number(a.style.zIndex) - Number(b.style.zIndex));
});
然后您大概可以遍历该数组，在每个数组上调用 drawImage()。为了正确的 z 顺序渲染，您需要首先绘制背面图像(最低 z-index 项目)，按照上面的排序，这意味着您从数组的开头绘制到结尾。
关于javascript - 如何按 z-index 对这些 Canvas 元素进行排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8814384/