Wie am effizientesten copyArea bei Canvas implementieren?
Clemens Eisserer
- multimedia (audio & video)
Hi,
Ich suche nach einer Möglichkeit, einen Bereich eines HTML5-Canvas an eine andere Position zu kopieren - ähnlich der copyArea Methode von Java.
Die einzige Idee die mir eingefallen wäre, ist zuerst den Bereich mittels getImageData() als ImageData-Objekt zu kopieren und anschließend wieder mittels drawImage() zu zeichnen - was leider langsam ist.
Kennt ihr einen effizienteren Weg?
Danke im Vorraus, Clemens
Hi,
Ich suche nach einer Möglichkeit, einen Bereich eines HTML5-Canvas an eine andere Position zu kopieren - ähnlich der copyArea Methode von Java.
Die einzige Idee die mir eingefallen wäre, ist zuerst den Bereich mittels getImageData() als ImageData-Objekt zu kopieren und anschließend wieder mittels drawImage() zu zeichnen - was leider langsam ist.
Kennt ihr einen effizienteren Weg?
Im Prinzip könnte Doppelpufferung eine mögliche Lösung sein.
Bisherige Ausgabe im einen Puffer-Context durchführen, im Anzeige-Context einen clip-Pfad mit dem gewünschten Ausschnitt setzen und den Puffer per drawImage in den Anzeige-Context kopieren.
Nachtrag: Einen Clipping-Pfad zu setzen ist nicht notwendig da drawImage das auch mit zusätzlichen Parametern direkt selbst erledigen kann.)