Boilerplate Code meint hier Codefragmente, die an vielen Stellen in mehr oder weniger unveränderter Form benötigt werden. Templates ( = Schablonen), sind Vorlagen, die mit Inhalt gefüllt werden können. Dieses Projekt dient der Einarbeitung in die Grafik allgemein, dem Device-Context und Canvas ( HTML5 ) . Es wird ein "self-made" Toolchen mit dem Namen "Metaprogrammierung mit Canvas" entwickelt.
Dieses einführende Canvas-Projekt zielt auch auf vertiefende Einsichten in Entsprechungen der ( "großen" ) Praxis, wie z.B.
Hier eine grobe Liste von geeigneten Projekten:
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden. Hierzu bitte den Quickstart ( notwendiges Grafik-Grundwissen ) nachlesen.
Weitere Hinweise:
Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle,
umfangreiche Grafik-Programme, siehe z.B.
de.wikipedia Grafiksoftware.
HTML5 ermöglicht die eingebettete Verwendung von Canvas-Tags, die als Grafik-Flächen dienen. Eine "elektronische Zeichenfläche" wird engl. auch Canvas ( Leinwand, Gewebe ) genannt. Die Canvas-Unterstützung erfordert ECMAScript. 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'
Canvas-Weblinks ( Weblinks )
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
Hier sind einfache, unfertige, fehlerhaftes, einführende Beispiele, die fuer die eigene Lösung hilfreich sein können. Siehe z.B. Flächenberechnung ( geschlossener Polygonzug ) und Canvas-Lehrbeispiele .
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr