HTML5 Canvas 只绘制可见图像

Question

是否可以在HTML5画布上"检测"并仅绘制可见图像？这将在我的游戏中进行巨大的性能优化，例如，如果图像 1 被图像 2 覆盖，我如何只绘制图像 2？

Answer 1

这是愚蠢的遮挡剔除，而不是像原始《DOOM》中那样的花哨的树顺序对象集合。

我不知道这种方法的开销是否会得到回报，你需要尝试一下看看。 可能缺少一个 ;或 {} 或两个。

count = count of all objects
for (i = 1; i < count; i++)
    visible[i] = true;
for i = 0; i < count; i++
{
    not_hidden = true;
    for (j = 0; j < count && not_hidden; j++)
    {
        if ((i!= j) && visible[j] 
            // if j is closer/on top -- reverse this if increased depth = -z not +z
            && (z-order[j] < z-order[i]) 
            // bounding rectangles 0,0 = top-left of screen
            && (obj[i].left <= obj[j].right) && (obj[i].right <= obj[j].right) && (obj[i].left >= obj[j].left)
            && (obj[i].top <= obj[j].bottom) && (obj[i].bottom <= obj[j].bottom) && (obj[i].top >= obj[j].top) )
        {
            visible[i] = false;
            not_hidden = false;
        }
    }
}

现在只绘制可见 [ix] 为真的对象