绘制画布深度对象

Question

如何使用不同深度的对象数组并使用canvas / jquery在iso投影中绘制它们？

Answer 1

HTML5 Canvas不支持z缓冲，因此您负责以正确的顺序绘制对象，从距离查看器最远的对象开始，以最接近查看器的对象结束。

你可以通过简单地用比较器函数对数组进行排序来实现这一点，该函数可以告诉两个对象中哪一个更“深”。这是一个通过简单比较字段z来对对象进行排序的示例。根据您确切的用例，确定哪一个比另一个更深可能不那么直接。

function object_compare(obj1, obj2) {
     if (obj1.z == obj2.z) return 0;
     if (obj1.z > obj2.z) {
         return 1;
     } else {
         return -1;
     }
}
array.sort(compare_function);

以下是关于gamedev.stackexchange.com的一些问题，您也可以对此感兴趣：

• https://gamedev.stackexchange.com/questions/48710/is-it-good-to-sort-objects-list-before-every-rendering
• https://gamedev.stackexchange.com/questions/47388/best-technique-for-drawing-isometric-tiles
• https://gamedev.stackexchange.com/questions/48423/basic-isometric-projection-in-javascript