Kurzfassung: Es geht um das Erstellen eine "self made" App. Grundkenntnisse der Computergrafik werden wiederholt. Es ist eine "self made" Canvas-Bibliothek zu erstellen, zu testen, zu verwenden. Die Canvas-App ( Name z.B. "2D Canvas für 3D Geometrie" ) soll praktische, robust und ästetisch ansprechend sein. Eingabewerte für geometrische Daten, Simulationen, Agenta, Styles, usw. ) werden mit Hilfe einer Textarea TA0 gemacht. Animationsmöglichkeiten ( .resize, .setInterval, usw. ) der Canvas-Grafiken sind optional.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung, der Erstellung einer "self-made" Canvas-Bibliothek wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. "Plagiate sind out".
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'
Einige Canvas-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
Was enthält der Canvas-Kontext ctx? Etwa ...
canvas:[object HTMLCanvasElement] fillStyle:#000000 font:10px sans-serif globalAlpha:1 globalCompositeOperation:source-over lineCap:butt lineJoin:miter lineWidth:1 miterLimit:10 shadowBlur:0 shadowColor:rgba(0, 0, 0, 0.0) shadowOffsetX:0 shadowOffsetY:0 strokeStyle:#000000 textAlign:start textBaseline:alphabetic
Was enthält das HTMLCanvasElement ctx.canvas? Etwa ...
ctx=accessKey: all:[object HTMLCollection] attributes:[object NamedNodeMap] baseURI: ...dat.htm childElementCount:0 childNodes:[object NodeList] children:[object HTMLCollection] classList: className: clientHeight:220 clientLeft:6 clientTop:6 clientWidth:320 contentEditable:inherit currentPage:0 currentStyle:[object CSSStyleDeclaration] dataset:[object DOMStringMap] dir: draggable:false dropzone: firstChild:[object Text] firstElementChild:null height:200 hidden:false id:POLYGON_FLAECHE innerHTML:Browser kann kein Canvas innerText:Browser kann kein Canvas isContentEditable:false itemId: itemProp: itemRef: itemScope:false itemType: itemValue:null lang: lastChild:[object Text] lastElementChild:null localName:canvas namespaceURI:http://www.w3.org/1999/xhtml nextElementSibling:[object HTMLScriptElement] nextSibling:[object Text] nodeName:CANVAS nodeType:1 nodeValue:null offsetHeight:232 offsetLeft:14 offsetParent:[object HTMLBodyElement] offsetTop:2535 offsetWidth:332 outerHTML:<canvas id="MYID" width="300" height="200" style="...">Browser braucht Canvas</canvas> outerText:Browser kann kein Canvas ownerDocument:[object HTMLDocument] pageCount:1 parentElement:[object HTMLElement] parentNode:[object HTMLElement] prefix:null previousElementSibling:[object HTMLParagraphElement] previousSibling:[object Text] properties:[object HTMLPropertiesCollection] scrollHeight:232 scrollLeft:0 scrollTop:0 scrollWidth:332 spellcheck:true style:[object CSSStyleDeclaration] tabIndex:-1 tagName:CANVAS textContent:Browser kann kein Canvas title: unselectable: width:300 onscroll:null onfocusin:null onfocusout:null onclick:null onmousedown:null onmouseup:null onmouseover:null onmouseenter:null onmousemove:null onmouseout:null onmouseleave:null onmousewheel:null onkeypress:null onkeydown:null onkeyup:null onload:null onunload:null onabort:null onerror:null onfocus:null onblur:null ondblclick:null oncontextmenu:null oninvalid:null onloadstart:null onprogress:null onsuspend:null onstalled:null onloadend:null ontimeout:null onemptied:null onplay:null onpause:null onloadedmetadata:null onloadeddata:null onwaiting:null onplaying:null onseeking:null onseeked:null ontimeupdate:null onended:null oncanplay:null oncanplaythrough:null onratechange:null ondurationchange:null onvolumechange:null oncuechange:null onfullscreenerror:null onfullscreenchange:null onpagechange:null ondragstart:null ondrag:null ondragenter:null ondragleave:null ondragover:null ondrop:null ondragend:null oncopy:null oncut:null onpaste:null ontextinput:null
Die eigenen App-Ideen können z.B. hin gerichtet sein auf
Mediengestaltungen, Seiten-Design mit Canvas,
Statistik-Visualisierung, technischen Diagrammen, Balkendiagramme, Tortendiagramme,
charts library, Landkarten, Stadtplänen, Flugblätter, 3D-Schriftzüge,
elektronisches Dashboard (englisch für Armaturenbrett, Instrumententafel), SketchUp,
Geo-Algebra, geometrische Formen,
dynamische Gestaltung von Webseiten, Animationen,
wissenschaftliche Simulationen ( parameterabhängige Visualisierungen ), usw.
Beispiele für dieses App-Projekt sind z.B. 2 1/2 D Präsentationsgrafiken, Mediengestaltungen, Balkendiagramme, Tortendiagramme, Geo-Algebra, geometrische Formen ( de.wikipedia: Dreieck , Sierpinski-Dreieck , mathworld: Perfektes Rechteck , usw. ), 3D digitales Geländemodelle siehe de.wikipedia Polygonfläche und Schwerpunkt ( Gauß-Ellington ), usw.
Hier ist ein Siehe Start-Lehr-Beispiel Anfang mit nicht getesteten Code. Dieses Beispiel kann als Ausgangspunkt für vielseitige "Canvas-Variationen" verwendet werden. Die erstellt App soll einfach bedienbar, robust, gesetzeskonform und praisnah sein. Der erstellt Code verwendet selbst entwickelte Bibliotheken ( Namespaces ).
Bei fortgeschritttene Simulationen, Animationen und grafischen Web-Entwicklungen werden zahlreiche Parameter benötigt. So bilden z.B. 3D-Polygon-Flächen-Eckpukte ( xi,yi ) und zugehörige topologische Daten das BREP-Datenmodell. Bei fortgeschritttenen Simulationen, Animationen und grafischen Web-Entwicklungen findet der Datenaustausch weniger über Bilder und mehr über "strkturierte Strings" statt. Das Rendern der Strukturen liefert das grafische Ergebnis.
Konkret was zu dem Start-Lehr-Beispiel:
Canvas ( ein Anfang )
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr