Ich implementiere gerade einen 2d deformierbaren Terrain-Effekt in einem Spiel, an dem ich arbeite, und es läuft gut, aber ich kann mir vorstellen, dass es sehr schnell zu einem Performance-Schwein wird, wenn ich weitere Ebenen zu diesem Effekt hinzufüge.
>Nun suche ich nach einer Möglichkeit, einen Pfad oder eine Schnittmaske oder ähnliches zu speichern, anstatt jeden Punkt des Pfades im Terrain zu speichern, den ich durch jeden Frame zeichnen muss. Und wenn ich mehr Layer hinzufüge, muss ich mehr und mehr über den Pfad iterieren, der Tausende von Punkten enthalten kann.
Ein sehr einfacher Code, um zu demonstrieren, was ich gerade mache
%Vor%Im Grunde bin ich auf eine effektive Art und Weise, meine Schnittmaske für mein Bild über und über jedem Bild zu zeichnen
Beachten Sie, dass Ihre Clipping-Region bis auf die x / y-Position genau gleich bleibt. Das ist ein großes Plus.
Die Clipping-Region ist eines der Dinge, die mit context.save() und context.restore() gespeichert und wiederhergestellt werden, so dass es möglich ist, es auf diese Weise zu speichern (mit anderen Worten, es nur einmal zu definieren). Wenn Sie es platzieren möchten, verwenden Sie ctx.translate() anstelle von arcs x, y.
Aber es ist wahrscheinlich effizienter, es auf eine zweite Art zu tun:
drawImage mit der speicherinternen Zeichenfläche in Ihrem Spielkontext. Mit anderen Worten: cRenderContext.drawImage(in-memory-canvas, x, y); , wobei x und y der geeignete Ort sind. Auf diese Weise bleibt die Clipping-Region immer an der gleichen Stelle und wird nur einmal gezeichnet. Das Bild wird auf dem Clipping-Canvas verschoben und dann so gezeichnet, dass es korrekt aussieht. Anschließend wird das speicherinterne Canvas auf Ihre Hauptarbeitsfläche gezeichnet. Es sollte viel schneller sein, , da Aufrufe von drawImage viel schneller sind als Pfade erstellen und zeichnen.
Als separate Leistungsüberlegung rufen Sie nicht save und restore auf, es sei denn, Sie müssen. Sie brauchen Zeit und sie sind in Ihrer Schleife oben unnötig.
Wenn Ihr Code Open-Source ist, lassen Sie es mich wissen und ich werde es im Allgemeinen leistungsmäßig betrachten, wenn Sie wollen.
Warum haben Sie nicht eine Leinwand für den Vordergrund und eine Leinwand für den Hintergrund? Wie die folgende Demo
Vordergrund- / Hintergrund-Demo (Ich bin vielleicht ein bisschen über Bord gegangen, um die Demo zu machen:? Ich liebe es, mit JS / Canvas zu spielen.
Aber im Grunde ist die Vordergrund-Leinwand neben dem Inhalt transparent, so dass sie wie eine Maske über der Hintergrund-Leinwand wirkt.
Es sieht so aus, als ob es jetzt mit einem neuen path2D -Objekt möglich ist.
Mit der neuen Path2D-API (verfügbar ab Firefox 31+) können Sie Pfade speichern, wodurch der Zeichnungscode für die Zeichenfläche vereinfacht und schneller ausgeführt werden kann. Der Konstruktor bietet drei Möglichkeiten zum Erstellen eines Path2D-Objekts:
%Vor%Die dritte Version, die SVG-Pfaddaten zum Konstruieren verwendet, ist besonders praktisch. Sie können jetzt Ihre SVG-Pfade wieder verwenden, um dieselben Formen auch direkt auf einer Leinwand zu zeichnen:
%Vor%Die Informationen stammen aus der offiziellen Mozilla-Website .
Tags und Links javascript optimization html5 canvas