zeichnen 10.000 Objekte auf Leinwand javascript

Ich kann Ihnen 10.000 es gibt aber zwei wesentliche Nachteile.

1. Können Sie feststellen, die Bilder nicht respektieren, Transparenz komplett aus, es ist möglich, zu beheben.. aber das würde den Rahmen dieser Antwort.

2. Müssen Sie mit Mathematik zu tun, jede Art von Veränderungen, denn das standard-canvas-transformation matrix nicht angewendet werden können, um Bilddaten

Live-Demo

Erklärung des Codes und Methoden

So um die Schnellste Leistung möglich mit Leinwand und eine große Anzahl von Objekten, die Sie verwenden müssen,Bilddaten. Dies ist der Zugriff auf das canvas-element auf einer pro-pixel-Ebene, im Grunde, und erlaubt Ihnen, alle Arten von Coole Sachen. Früher habe ich zwei primäre Methoden.

• putImageData
• createImageData

Ist auch hier ein nettes tutorial, geht in es ein bisschen zu helfen, ein besseres Verständnis.

So habe ich zunächst erstellt eine temporäre Leinwand für das Bild

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

Nächsten Ist das wichtigste Stück, das in der rendering-Funktion

Ich bin einfach nur posten die relevanten Teile.

//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);

Den wichtigsten Weg von diesem ist, wenn Sie brauchen, um zu zeichnen, eine lächerliche Anzahl von Objekten auf der Leinwand, die Sie nicht Verwendung drawImage, pixel manipulation ist dein Freund.

Hier sind einige Schritte, die Sie tun können, um die Leistung zu erhöhen:

• Ersten loszuwerden, die save/restore - Sie sind sehr teuer, fordert und ersetzt werden kann, mit setTransform
• Entspannen der Schleife zu tun, mehr innen pro iteration
• Cache alle Eigenschaften

FIDDLE

Beispiel mit Schleife abgewickelt für 4 Iterationen:

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

(erwarte nicht, dass Echtzeit-performance aber).

Obwohl, es ist vielleicht ein bisschen sinnlos, Zeichnung 2000-Objekte in einem so kleinen Bereich. Wenn Sie nach der Wirkung ich würde vorschlagen, diesen Ansatz statt:

• Erstellen Sie eine off-screen-Leinwand
• Produzieren 5-8 frames mit der oben genannten Methode und speichern Sie als Bilder
• Spielen wieder die 5-8 Bildern ist zu tun, anstatt alle Berechnungen

Wenn Sie brauchen mehr Flüssigkeit sehen einfach produzieren mehr frames. Speichern Sie jedes Bild in einer einzigen Leinwand, basierend auf Zellen, die Sie verwenden, wie ein sprite-Blatt später. Beim zeichnen müssen Sie natürlich aufpassen, dass die aktuellen Positionen sind statisch versus bewegt, wenn tatsächlich animiert. Rotation und die daraus resultierende position ist ein weiterer Faktor.

Wenn die Bilder nicht überlappen, dann ist das resultierende Bild ist 3200x3200 Pixel, das ist mehr als die meisten displays angezeigt werden können. So können Sie versuchen, um die bounding-box des transformierten Bildes und überspringen diejenigen, die sich außerhalb des sichtbaren Bereichs (auch wenn die Leinwand sollte schon das für Sie tun).

Einer anderen Idee kombinieren Sie die kleinen Bilder in größeren und verwandeln Sie zusammen als eine Gruppe.

Wenn Sie möchten, organisieren der Bilder in einem ring, dann können Sie zeichnen, Sie einmal als ring, speichern als Bild, und drehen Sie dann die "ring-Bild" anstatt jedes einzelne Bild.

Schließlich haben Sie einen Blick auf WebGL, die möglicherweise effizienter als 2D - canvas API.