Diese MMK-Aufgabe beschäftigt sich mit der Grafik, dem Wiederholen von notwendigemn Grundkenntnissen, der Entwicklung einer Canvas-App und deren Dokumentation.
Konfuzius
I hear and I forget,
I see and I remember,
I do and I understand.
Zum Programmieren von erfolgreichen Apps gehören IT-Kontextwissen und vielschichtige Programmiererfahrungen, vertiefte Kenntnisse aus nicht IT-Fachgebieten, vertiefte Kenntnisse von Normungen, Entwicklerwerkzeugen und den unterstützenden Bibliotheken.
Grafik ist ein vielschichtiges Gebiet und umfaßt Computergrafik, Bildverarbeitung, Grafikdesign, Vektorkunst, Scalable Vector Graphics, grafisches Device-Interface, Window-Techniken, Kompression von Bild- und Video-Daten, usw.
Zu grafischen Entwicklungen gehören notwendige Grundkenntnisse aus unterschiedlichen Fachgebieten, grundlegende Basis-Ideen, die ein selbstgestaltetes ( "self-made" ) Canvas-Projekt weiter führen können hin zu einer nachhaltigen, erfolgreichen Software-Entwicklung.
Was gehört zur Grafik? Hier ist ein Quickstart zu notwendigen Grafik-Grundwissen.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung wohl nicht hinreichend, wenn z.B. Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden. Hier einige Weblinks:
Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle,
umfangreiche Grafik-Programme, siehe z.B.
de.wikipedia Grafiksoftware.
HTML5 ermöglicht die Einbettung von Canvas-Tags in HTML5-Seiten. Ein Canvas-Tag dient als Grafik-Anzeigefläche, die mit Hilfe von ECMAScript-Aufrufen "bemalt" wird. Eine "elektronische Zeichenfläche" wird engl. auch Canvas ( Leinwand, Gewebe ) genannt. Die Canvas-Unterstützung erfordert ECMAScript. HTML5-Canvas bietet eine infache "nativ"-Schnittstelle.
Obwohl Canvas2DContext leichtgewichtig gegnüber WebGL, OpenGL, Silverlight ist,
so gibt es doch nützliche Funktionen und Properties, wie z.B.
ctx.translate(), ctx.translate(), ctx.scale(),
ctx.createLinearGradient(), ctx.createRadialGradient() und shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
.
Es gibt:
Canvas2DContext hat u.a. Funktionen für 'arc','arcTo','beginPath','bezierCurveTo','clearRect','clip', 'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo', 'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform', 'stroke','strokeRect','strokeText','transform','translate'
Properties, wie z.B. 'canvas','fillStyle','font','globalAlpha','globalCompositeOperation', 'lineCap','lineJoin','lineWidth','miterLimit', 'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor', 'strokeStyle','textAlign','textBaseline'
whatwg the-canvas-element whatwg beginPath() en.wikipedia Canvas_element
de.wikipedia Canvas-HTML-Element, whatwg.org the-canvas-element 2012, simon Canva-Referenz-Karte, alles auf einen Blick w3schools Canvas-Referenz, alles auf einen Blick w3schools Canvas, Einführung html5canvastutorials HTML5 Canvas-Tutorial, opera html-5-canvas-the-basics , opera html-5-canvas-painting , mozilla Canvas tutorial , mozilla DOM/EventTarget.addEventListener , apple Safari HTML5 Canvas Guide
Die Canvas-Browser-Unterstützung zeigt en.wikipedia: en.wikipedia: Comparison_of_layout_engines_&HTML5_Canvas , caniuse: canvas
Die unfertige Seite für Lissajous-Figuren lissajous-Figuren kann als Ausgangspunkt und zum schnelleren Einstieg dienen.
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr