Hallo alle zusammen,
Ich beschäftige mich gerade mit dem ( ich sag jetzt einfach mal neuem ... ) Canvas Element von HTML 5. ( Ich weiß, das gibts schon länger aber jetzt bekommt es einen deutlicheren Hype und Stellung im Web, sag ich mal. )
Also ich bin kein Entwickler, sondern komme ehr aus der visuellen Design Richtung.
Seit einigen Jahren aber auch im WebDevelopment Bereich ala Javascript mit jQuery etc....
Auch PHP und Objektorientierte Programmierung sind mir ein Begriff und im PHP Bereich auch ganz gut geläufig. Das nur als Ausgangsbasis zu meiner Person....
Okay.... ich beschäftige mich also seit Neustem mit dem Canvas Element und wie man damit arbeitet und bin mir ehrlich gesagt überhaupt nicht im Klaren, wie man bei dieser ( mir bislangen bekannten ) Vorgehensweise, wie man etwas in die Fläche zeichnen lassen kann, etwas unsicher.
Durch Javascript etc... bin ich es gewohnt, z.B. ein Object in der Hand zu haben und diesem auch mal in Echtzeit ein paar Eigenschaften zu ändern und dieses vom Browser automatisch aktualisiert bekommt.. ( z.B. CSS oder Positionen etc... )
Wie aber funktioniert das mit Canvas?
Soweit ich das bisher verstanden habe, gibt es praktisch nur noch eine Art Stream, der Zeile für Zeile abgearbeitet wird... und jedes Element sofort in die Zeichenfläche gerendert wird.... richtig? Ein Freund von mir sagte, es gibt wohl zwei Arten von Abarbeitungsmethoden ( drücke ich jetrzt mal so aus ). Deklarativ und Imperativ .... wobei bei Canvas dann wohl die Imperative Methode zum tragen kommt... oder?
Ich bin jetzt gerade am überlegen, wie man das Ganze umsetzt und z.B. in einer Art kleinen Engine/Framework so händeln kann, dass man zu jeder Zeit die Eigenschaften (gerade auch im Bezug auf eine Art z-index) eines Elements im Screen ändern kann und der Screen "möglichst" ruckelfrei neu gerendert wird.
( ich spreche hier nur den 2D Context an ... 3D ist zu aufwendig )
Hab mir nun schon ein paar Gedanken gemacht, wie ich mir das evtl. in einem kleinen Framework vorstelle und wie die Abarbeitung funktionieren könnte:
1. Schritt: Ich habe ein kleines eigenes Framework, was ich allgemein dafür verwenden könnte, um meine verschiedenen Elemente für ein schöneres Arbeiten, als schönes OOP Object zur Verfügung stellt und die ich mir selbst so schreiben kann, dass ich schön einfach per OOP eben dessen Eigenschaften ändern kann etc........
2. Schritt: Damit etwas im Normalfall im Canvas animiert werden kann, braucht man einen Interval, der zB. alle 10ms die Fläche komplett leert .... oder?
3. Schritt: Eine Art Render-Funktion, die per Intervall immer aufgerufen wird. In dieser Funktion würde ich sämtliche Objects in meinem Framework durchlaufen und von denen z.B. auch wieder eine Render-Methode aufrufen, die dann das Element erzeugt, dessen Eigenschaften ( Farbe, Border, Image etc.... ) setzt und am ende immer dessen canvas.stroke(); Methode zum Rendern ausführt.
Bevor ich weiter rede...... ... bin ich damit evtl. schon auf einem richtigen oder guten Weg vom Gedanken her oder bin ich total auf dem Holzweg?
Bin hier für jede Hilfe oder Tipp dankbar, den Ihr für mich hättet.
Aber sagt mir ruhig, wenn ich falsch liege.
Gruß Mario
Ich beschäftige mich gerade mit dem ( ich sag jetzt einfach mal neuem ... ) Canvas Element von HTML 5. ( Ich weiß, das gibts schon länger aber jetzt bekommt es einen deutlicheren Hype und Stellung im Web, sag ich mal. )
Also ich bin kein Entwickler, sondern komme ehr aus der visuellen Design Richtung.
Seit einigen Jahren aber auch im WebDevelopment Bereich ala Javascript mit jQuery etc....
Auch PHP und Objektorientierte Programmierung sind mir ein Begriff und im PHP Bereich auch ganz gut geläufig. Das nur als Ausgangsbasis zu meiner Person....
Okay.... ich beschäftige mich also seit Neustem mit dem Canvas Element und wie man damit arbeitet und bin mir ehrlich gesagt überhaupt nicht im Klaren, wie man bei dieser ( mir bislangen bekannten ) Vorgehensweise, wie man etwas in die Fläche zeichnen lassen kann, etwas unsicher.
Durch Javascript etc... bin ich es gewohnt, z.B. ein Object in der Hand zu haben und diesem auch mal in Echtzeit ein paar Eigenschaften zu ändern und dieses vom Browser automatisch aktualisiert bekommt.. ( z.B. CSS oder Positionen etc... )
Wie aber funktioniert das mit Canvas?
Soweit ich das bisher verstanden habe, gibt es praktisch nur noch eine Art Stream, der Zeile für Zeile abgearbeitet wird... und jedes Element sofort in die Zeichenfläche gerendert wird.... richtig? Ein Freund von mir sagte, es gibt wohl zwei Arten von Abarbeitungsmethoden ( drücke ich jetrzt mal so aus
). Deklarativ und Imperativ .... wobei bei Canvas dann wohl die Imperative Methode zum tragen kommt... oder?Ich bin jetzt gerade am überlegen, wie man das Ganze umsetzt und z.B. in einer Art kleinen Engine/Framework so händeln kann, dass man zu jeder Zeit die Eigenschaften (gerade auch im Bezug auf eine Art z-index) eines Elements im Screen ändern kann und der Screen "möglichst" ruckelfrei neu gerendert wird.
( ich spreche hier nur den 2D Context an ... 3D ist zu aufwendig
)Hab mir nun schon ein paar Gedanken gemacht, wie ich mir das evtl. in einem kleinen Framework vorstelle und wie die Abarbeitung funktionieren könnte:
1. Schritt: Ich habe ein kleines eigenes Framework, was ich allgemein dafür verwenden könnte, um meine verschiedenen Elemente für ein schöneres Arbeiten, als schönes OOP Object zur Verfügung stellt und die ich mir selbst so schreiben kann, dass ich schön einfach per OOP eben dessen Eigenschaften ändern kann etc........
2. Schritt: Damit etwas im Normalfall im Canvas animiert werden kann, braucht man einen Interval, der zB. alle 10ms die Fläche komplett leert .... oder?
3. Schritt: Eine Art Render-Funktion, die per Intervall immer aufgerufen wird. In dieser Funktion würde ich sämtliche Objects in meinem Framework durchlaufen und von denen z.B. auch wieder eine Render-Methode aufrufen, die dann das Element erzeugt, dessen Eigenschaften ( Farbe, Border, Image etc.... ) setzt und am ende immer dessen canvas.stroke(); Methode zum Rendern ausführt.
Bevor ich weiter rede......
... bin ich damit evtl. schon auf einem richtigen oder guten Weg vom Gedanken her oder bin ich total auf dem Holzweg?Bin hier für jede Hilfe oder Tipp dankbar, den Ihr für mich hättet.
Aber sagt mir ruhig, wenn ich falsch liege.
Gruß Mario
