Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript lernen

Zeichnen mit Canvas

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das "optische Highlight" von HTML5 ist sicher, dass Sie mit Hilfe von Canvas-Objekten und JavaScript komplexe Grafiken direkt im Browser zeichnen können. Hier ein Kompaktüberblick.
05:28

Transkript

Sie erhalten in diesem Video einen kurzen Einblick in HTML5. Genauer genommen eigentlich nur in eine spezielle Anwendung von HTML5, den sogenannten Canvas, die aber recht eindrucksvoll sind und durchaus auch zu den populären Bestandteilen von diesem neuen Standard gehören. HTML5, was meiner Meinung nach unter einer vollkommen falschen Flagge segelt, beinhaltet im Wesentlichen semantische Elemente, d.h. solche, die eine gewisse Zusatzinformation zu Inhalten darstellen, und viele Elemente, die eigentlich nichts weiter sind als JavaScript, bzw. DOM-Erweiterung. Von daher sollte man eigentlich nicht von HTML, sondern von JavaScript reden, oder von DOM. Aber HTML scheint populärer vom Schlagwort her zu sein, von daher läuft das alles unter HTML. Was Sie jetzt hier sehen ist die Anwendung von sogenannten Canvas-Elementen". Ich zeige Ihnen mal, wie das aussehen wird, was wir jetzt machen wollen. Das hier ist das Resultat dessen, was wir gerade tun. Das sieht jetzt nicht allzu spannend aus. O.K., wir haben hier zwei Rechtecke, die überlagern sich, haben hier Transparenzeffekte und wenn wir mit der rechten Maustaste draufklicken, dann sehen wir, dass wir eine Grafik haben. Die können wir auch anzeigen, das ist wohl ein .pmg, und wir können sie speichern, und was man so mit Grafiken machen kann. Der entscheidende Part ist allerdings, diese Grafik wird nicht vom Server geladen, sie wird im Browser gezeichnet. Es gibt keine Grafik, die in dem Moment nachgeladen wird, auch wenn Sie hier ein Image-Tag sehen. Dieser Image-Tag ist dafür da, Browsern, die noch nicht mit Canvas-Elementen klar kommen, eine Alternative anzuzeigen. Schauen wir uns das einmal an. Wir haben hier den Internet Explorer, und der ist ja immer ein guter Test-Browser, um zu sehen, ob Dinge gehen oder ob sie eben nicht gehen. Weil, wenn etwas nicht geht, dann geht es meistens im Internet Explorer nicht. Und hier ist das Canvas-Element da. Das ist doch wirklich gezeichnetes Canvas. Aber bereits wenn ich hier im Internet Explorer 9 in Kompatibilitätsansicht gehe, dann kann er kein Canvas. Die 8er-Version, die 7er und noch älter, die können das ganz einfach nicht. Und dieses Bild, das Sie jetzt sehen, das ist genau das, was hier in dem Image angegeben wird. Ansonsten ist im Fall von Canvas, rein unter HTML, eigentlich nichts zu machen, außer dass dieses neue Element canvas notiert wird, und man gibt zur Sicherheit noch eine Breite und Höhe an, was man theoretisch auch mit Stylesheets machen kann, aber das wird wirklich empfohlen, das sogar mit den HTML-Eigenschaften 'width' und 'height' festzulegen. Interessant ist es nun, wie so ein Canvas generiert wird. Und das ist der Quellcode. Auch der ist nicht zum Vergleich, aber beinhaltet bereits das, was diese gesamte Canvas-Technologie ausmacht. Diese ist sehr, sehr umfangreich. Sie haben wahnsinnig viele Möglichkeiten zu zeichnen auch sehr komplexe Dinge und was wir in diesem Video nur behandeln ist der Grundeinstieg. Was Sie brauchen, um damit umzugehen. Und Sie sehen, dass hier eine Funktion Zeichnen beim Laden der Website, oder nach dem Laden der Website, aufgerufen wird. Und diese selektiert dieses Element canvas in der Webseite und ruft dann eine Methode auf "getContext" und das ist eine spezielle Methode eines Canvas-Elements. Sie erhalten dadurch einen sogenannten Grafikkontext. Sie sehen hier momentan einen Parameter 2D. Es ist geplant, dass es auch einmal einen Parameter 3D gibt, und die Preisfrage ist, wofür sollte das wohl gut sein? Momentan zeichnen wir zweidimensional und, wenn es dann in die dreidimensionalen Grafiken geht, wird man einen dreidimensionalen Grafikkontext bekommen. Auf diesem Grafikkontext, was ein Objekt darstellt, gibt es Eigenschaften und Methoden. Ein "fillStyle" ist ganz offensichtlich eine Eigenschaft, das ist wohl eine Angabe, wie eine Füllung zu erfolgen hat, mit einer nachfolgend aufgerufenen Grafikmethode. Und wenn ich hier "rgb(200,0,0)" angebe - rgb, red, green, blue - bedeutet das, dass ich dort wohl eine ziemlich rote Farbe habe. Sie können bis zu 255 Anteile rot hinzufügen; 200 ist schon recht viel. "FillRect" malt ein gefülltes Rechteck, so wie der Name es sagt, mit gewissen Parameterangaben. Linke obere Ecke, rechte untere Ecke. Dann ändere ich den fillStyle, benutze hier auch eine Angabe rgba, d.h. wir haben hier noch ein Transparenzmodus. Zwischen 0 und 1 können Sie hier einen Wert angeben 1 ist voll deckend und dann fülle ich einen anderen Bereich in meinem Canvas mit einem weiteren Rechteck. Und das ist es, was hier passiert ist. Ich betone nochmal, das Interessante ist, dass diese Grafik gezeichnet wird. Das ist eine Pixelgrafik, keine Vektorgrafik, wenn Sie sich auskennen. Aber der Browser zeichnet sie, und damit ist die Übertragungszeit, die Datenmenge, die übertragen wird nicht groß. Und wenn der Rechner und der Browser genügend leistungsfähig sind, dann kann man diese Ressourcen zum Zeichnen, zum Generieren von dieser Grafik, einfach nutzen. Und es gibt selbstverständlich eben nicht nur diese Möglichkeiten zum Zeichnen von Rechtecken, sie haben wirklich sehr, sehr viele schöne Grafikmethoden zur Verfügung. Und wenn Sie im Internet ein bisschen auf die Suche gehen, dann werden Sie auch entsprechende Beispiele finden, was man so mit diesem "Canvas"-Bereich macht. In diesem Video haben Sie aber die Grundlagen gesehen, und das ist dieser Grafikkontext, auf dem man bei so Canvas-Elementen zeichnet.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!