HTML5 Canvas仅绘制可见图像

Question

Is it possible to "detect" and draw only visible images on HTML5 Canvas? This'll make a huge performance optimisation in my game, for example if image 1 is covered by image 2, how can I only draw image 2 ?

Answer 1

This is dumb occlusion culling, not a fancy tree ordered collection of objects like in the original DOOM and such.

I have no idea whether the overhead of this method will pay off, you'll need to try it and see. There might be a missing ; or {} or two.

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;
        }
    }
}

Now only draw objects where visible[ix] is true