在画布上绘制10,000个对象javascript

Question

I need draw over 10,000 images (32x32 px) on canvas but over 2000 draws the performances is very bad.

this is a little example:

object structure {position:0}

for(var nObject = 0; nObject < objects.length; nObject++){
    ctx.save();
    ctx.translate(coords.x,coords.y);
    ctx.rotate(objects[nObject].position/100);
    ctx.translate(radio,0);
    ctx.drawImage(img,0,0);
    ctx.restore();
    objects[nObject].position++;
}

with this code I traslate the images around of a coordinates.

What do you recommend to improve performance?

update:

i try layering but the performances worsens

http://jsfiddle.net/72nCX/3/

Answer 1

I can get you 10,000 but there are two main drawbacks.

1. You may notice the images don't respect transparency entirely, its possible to fix.. but that's beyond the scope of this answer.

2. You will have to use math to do any sort of transformations because the standard canvas transformation matrix can not be applied to ImageData

Live Demo

Explanation of the code and methods

So to get the fastest performance possible with canvas and a large number of objects you need to use ImageData . This is accessing the canvas element on a per pixel level basically, and allows you to do all sorts of cool stuff. I used two primary methods.

• putImageData
• createImageData

Also here is a nice tutorial that goes into it a bit to help get a better understanding.

So what I did is first I created a temporary canvas for the image

imgToDraw.onload = function () {
    // In memory canvas
    imageCanvas = document.createElement("canvas"),
    iCtx = imageCanvas.getContext("2d");

    // set the canvas to the size of the image
    imageCanvas.width = this.width;
    imageCanvas.height = this.height;

    // draw the image onto the canvas
    iCtx.drawImage(this, 0, 0);

    // get the ImageData for the image.
    imageData = iCtx.getImageData(0, 0, this.width, this.height);
    // get the pixel component data from the image Data.
    imagePixData = imageData.data;

    // store our width and height so we can reference it faster.
    imgWidth = this.width;
    imgHeight = this.height;

    draw();
};

Next Is the main piece which is in the rendering function

I'm just posting the relevant portion.

// create new Image data. Doing this everytime gets rid of our 
// need to manually clear the canvas since the data is fresh each time
var canvasData = ctx.createImageData(canvas.width, canvas.height),
    // get the pixel data
    cData = canvasData.data;

// Iterate over the image we stored 
for (var w = 0; w < imgWidth; w++) {
    for (var h = 0; h < imgHeight; h++) {
        // make sure the edges of the image are still inside the canvas
        // This also is VERY important for perf reasons
        // you never want to draw outside of the canvas bounds with this method
        if (entity.x + w < width && entity.x + w > 0 &&
            entity.y + h > 0 && entity.y + h < height) {

            // get the position pixel from the image canvas
            var iData = (h * imgWidth + w) * 4;

            // get the position of the data we will write to on our main canvas
            // the values must be whole numbers ~~ is just Math.floor basically
            var pData = (~~ (entity.x + w) + ~~ (entity.y + h) * width) * 4;

            // copy the r/g/b/ and alpha values to our main canvas from 
            // our image canvas data.

            cData[pData] = imagePixData[iData];
            cData[pData + 1] = imagePixData[iData + 1];
            cData[pData + 2] = imagePixData[iData + 2];
            // this is where alpha blending could be applied
            if(cData[pData + 3] < 100){
                cData[pData + 3] = imagePixData[iData + 3];
            }
        }
    }
}

// now put all of that image data we just wrote onto the actual canvas.
ctx.putImageData(canvasData, 0, 0);

The main Take away from this is, if you need to draw a ridiculous number of objects on the canvas you can't use drawImage , pixel manipulation is your friend.

Answer 2

I think this is what you need.

Eric Rowell (creator of KineticJS) has done some stress tests here.

And he says this:

"Create 10 layers each containing 1000 shapes to create 10,000 shapes. This greatly improves performance because only 1,000 shapes will have to be drawn at a time when a circle is removed from a layer rather than all 10,000 shapes."

"Keep in mind that having too many layers can also slow down performance. I found that using 10 layers each made up of 1,000 shapes performs better than 20 layers with 500 shapes or 5 layers with 2,000 shapes."

Update: You would need to run test cases in which the most optimized procedure would be for you. Example: 10000 shapes can be achieved by either:

10000 shapes * 1 layer

5000 shapes * 2 layer

2500 shapes * 4 layer

Whichever works for you,choose that! It depends upon your code.

Answer 3

If the images don't overlap, then the resulting image is 3200x3200 pixels which is more than most displays can display. So you can try to get the bounding box of the transformed image and skip those which are outside the visible area (even though the canvas should already do that for you).

Another idea is to combine the small images into bigger ones and transform them together as a group.

If you want to organize the images in a ring, then you can draw them once as a ring, save that as an image and then rotate the "ring image" instead of each individual image.

Lastly, have a look at WebGL which might be more efficient than 2D canvas API.

Answer 4

Here are some steps you can do to increase the performance:

• First get rid of the save / restore - they are very expensive calls and can be replaced with setTransform
• Unwind the loop to do more inside per iteration
• Cache all properties

FIDDLE

Example with loop unwound for 4 iterations:

for(var nObject = 0,
        len = objects.length,    // cache these
        x = coords.x,
        y = coords.y; nObject < len; nObject++){

    ctx.setTransform(1,0,0,1, x, y);   // sets absolute transformation
    ctx.rotate(objects[nObject].position*0.01);
    ctx.translate(radio,0);
    ctx.drawImage(imgToDraw,0,0);
    objects[nObject++].position++;

    ctx.setTransform(1,0,0,1,x, y);
    ctx.rotate(objects[nObject].position*0.01);
    ctx.translate(radio,0);
    ctx.drawImage(imgToDraw,0,0);
    objects[nObject++].position++;

    ctx.setTransform(1,0,0,1,x, y);
    ctx.rotate(objects[nObject].position*0.01);
    ctx.translate(radio,0);
    ctx.drawImage(imgToDraw,0,0);
    objects[nObject++].position++;

    ctx.setTransform(1,0,0,1,x, y);
    ctx.rotate(objects[nObject].position*0.01);
    ctx.translate(radio,0);
    ctx.drawImage(imgToDraw,0,0);
    objects[nObject++].position++;
}
ctx.setTransform(1,0,0,1,0,0);  // reset transform for rAF loop

(don't expect real-time performance though).

Although, it is perhaps a bit pointless drawing 2000 objects in such a small area. If you are after the effect I would suggest this approach instead:

• Create an off-screen canvas
• Produce 5-8 frames with the method above and store them as images
• Play back those 5-8 images as-is instead of doing all the calculations

If you need more fluid look simply produce more frames. You can store each frame in a single canvas based on cells which you use as a sprite-sheet later. When drawing you must of course take care that current positions are static versus moving when actually animated. Rotation and the resulting position is another factor.

Answer 5

After various tests, I have come to the following conclusions:

• canvas does not have the capacity for this task.
• Layered canvas only helps performance when static elements need not be constantly redrawn.
• Add coordinates print limit helps a lot in rendering.
• alternatives to slow functions
• Do not print elements will ultimately hidden by another element with a higher z-index (working on it).

the end result is a small mix of all contributions. but needs improvement.

Tested with 30,000 objects and the performance is maintained at 60/fps.

http://jsfiddle.net/NGn29/1/

        var banPrint = true;
        for(nOverlap = nObject; nOverlap < objects.length; nOverlap++){
            if(
                objects[nOverlap].position == objects[nObject].position
                && nOverlap != nObject
            ){
                banPrint = false;
                break;
            }
        }