Eine Weile zurück Webkit (und damit Safari) begann CSS-Canvas-Hintergründe für Elemente zu unterstützen (Quelle: Ссылка ).
Dies kann die Erstellung von Spielen und Multimedia erheblich vereinfachen, da Sie zum Beispiel kein Canvas-Tag in ein DIV einfügen müssen, sondern einfach direkt in den Hintergrund des DIV einsteigen. So etwas vielleicht:
%Vor%Ich habe mich gefragt, ob es irgendwelche Geschwindigkeitsstrafen gibt? Theoretisch sollte das Zeichnen auf einen Hintergrund-Canvas schneller sein als das Zeichnen auf ein Canvas-Tag, besonders wenn das Zielelement leer ist.
Hat jemand das für High-Speed-Demos oder Spiele getestet?
Regulär scheint in meinen Tests auf chrome in linux debian im Vergleich zu Hintergrund-Canvas schlechter abzurunden, als der verwendete Code (auch hinzugefügt zu Ссылка ) )
%Vor%Das einzige, was ich zum Testen gemacht habe, ist fillRect, aber in einigen Fällen ist es immer noch mindestens 10% besser
Nach meinen Tests (auch umgekehrt) Reihenfolge ), ist das ursprüngliche Element canvas etwas, aber konsistent langsamer als der Hintergrund canvas .
Chromium 17 zeichnet ein Schachbrett 10000 mal in:
canvas -Element Safari 5 zeigt eine ähnliche Dynamik.
Versuchen Sie, die Anzahl der Iterationen auf 100000 zu setzen, die Ergebnisse sollten mit den obigen übereinstimmen.
Wir haben den Hintergrund-Canvas-Ansatz in einem Projekt versucht (als Versuch einer kleinen Optimierung), und die Ergebnisse waren unseren Erwartungen dramatisch entgegengesetzt. Das Ganze (zwei Ebenen: eine - ein div mit Hintergrund-Leinwand, die andere - eine normale Leinwand) wurde marginal langsamer . In der Tat, als wir die Hintergrund-Leinwand eingeführt haben, wurde die App langsam wie eine Hölle . Getestet in Chrome 21.
Ich garantiere definitiv würde nicht garantieren, dass der Hintergrundbereich in all Situationen schneller ist.
Tags und Links javascript canvas webkit safari