JavaScript Grundkurs

Zeichnen mit Canvas

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein optisches Highlight von HTML5 ist sicher, dass Sie mit Hilfe von Canvas-Objekten und JavaScript komplexe Grafiken direkt im Browser zeichnen können. Hier wird die Technik in kompakter Form vorgestellt.
05:12

Transkript

Ich möchte Ihnen hier ein Highlight, ein optisches Highlight von dem neuen HTML5 vorstellen, das sogenannte Canvas-Element. Dieses erlaubt das natieve zeichnen im Browser, im einfachen Fall, also so etwas. Sie haben hier zwei Rechtecke, die sich überlagern und transparent sind. Wenn Sie mit der rechten Maustaste hier drauf klicken, dann sehen Sie, dass das eine Grafik ist. Sie können diese Grafik auch anzeigen, nur wurde diese Grafik nicht vom Server als Grafik in den Client übertragen, sondern sie wurde sozusagen live im Browser gezeichnet und das mittels Javascript, wie die meisten Techniken von HTML5 eigentlich JavaScript Techniken sind, beziehungsweise eine Erweiterung vom Dom darstellen, ist auch dieses Canvas-Element, was Sie hier als HTML Element sehen, im Grunde nutzlos ohne den Einsatz von Javascript. Dieser Tag Canvas kommt mit HTML5 neu dazu und Sie können hier auch eine Breite und Höhe festlegen, aber im Grunde haben Sie damit nur einen Zeichenbereich, eine Leinwand, auf der man zeichnen muss und das macht man eben mit Javascript. Was im Inneren von diesem Canvas Element notieren ist ein Alternativbild oder eine Alternativinformation im weitesten Sinne für Browser, die noch nicht mit diesen Canvas Element zurechtkommen. Das sieht dann so aus etwa. Ich habe hier eine Simulation vom Internet Explorer 6 und der kann selbstverständlich mit diesem Canvas Element noch nicht umgehen und zeigt dann eben dieses alternative Bild an. Diese Canvas Technologie ist als Alternative und teilweise sogar als Ersatz für eine Technologie mit Namen SVG ,. scalable vector graphics gedacht, aber es ist keine Vektorgrafik, wenn Ihnen das was sagt. Eine Vektorgrafik berechnet aus sogenannten Vektoren ein Bild, während wir hier im Resultat ein Pixelformat haben, Aber es wird über JavaScript-Anweisungen erzeugt vom Browser und das wäre jetzt die JavaScript-Datei, die diese Ausgabe erzeugen würde in einem HTML5 fähigen Browser natürlich nur. Sie sehen, dass ich hier mit getElementsByTagName oder mit getElementByID, oder wie auch immer dieses Canvas-Element in der Webseite anspreche. Sie sehen die Null Indizierung, also als erste und Canvas-Element, Canvas- Objekte stellen eine Methode zur Verfügung get Kontex, damit hole ich mir den Grafikkontxt auf dem ich zeichnen möchte Wenn Sie schon Java programmiert haben, werden Sie vielleicht ein Dejavu haben. Das hatte man in den 90er Jahren bereits mit Java2d so ähnlich gehabt und Sie sehen hier 2D Stick wird zweidimensional. Es ist angedacht, dass man das irgendwann auch dreidimensional machen kann, aber jetzt hole ich mir sozusagen eine Leinwand, auf der ich zeichnen kann. Nun ja und auf diese Leinwand gibt es Methoden und Eigenschaften, hier zum Beispiel fillstyle, was eine Eigenschaft ist um den Styl für die Füllung festzulegen. Das hier wiederum, da sehen Sie an den Klammer, ist eine Zeichenmethode und wenn fillRect übersetzen, das ist ein gefülltes Rechteck mit Koordinatenangaben, linke obere Ecke und Breite, Höhe. Dann ändere ich hier den fillstyle, also das ist die Farbe und bei der RGBA Methode, beispielsweise hier hinten noch eine Transparenz, die ich da festlege und dann zeichne ich ein anderes Rechteck an einer anderen Koordinate, mit einer anderen Breite und einer anderen Höhe. Auf diese Weise können Sie die unterschiedlichsten Bilder zeichnen mit den geeigneten Methoden. Etwa sowas oder sowas, sowas, Farbverläufe hier, auch hier runde Farbverläufe oder das hier mit integrierten Bild, beliebige Formen gefüllt oder offene Texte auch mit Farbverläufen oder mit irgendwelchen Mustern. Auch mit Schatten kann man einiges machen mit Canvas, oder man kann auch Bilder zurechtschneiden, die sogenannte Clipping Technologie. Sie sehen also, dass dieses Objekt wahnsinnige Möglichkeiten bietet und die wesentlichen Vorteile sind eben, dass es im Browser nativ erzeugt wird. Man muss nur sehr wenige Anweisungen vom Server zum Client übertragen. Man kann die Browser Resourcen nutzen und das ist wie gesagt, dann wirklich auch ein Bild hier. Selbst für den Fall, dass wir nicht eine Grafik zurechtgeschnitten haben. Es lohnt sich also durchaus, wenn Sie mal im fortgeschrittene JavaScript sind, um sich mit den entsprechenden Methoden und Eigenschaften und dieser ganzen Philosophie auseinanderzusetzen.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...

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!