Projekt: Mathe mit Canvas Grafik und Devicekontext

  Zum Abbild gehört ein Hintergrund
  und darunter ist ein unsichtbarer Kontext.

Projekt Mathe-Didaktik mit Canvas Projekt-Kurzfassung

Es wird eine mehrsprachige App erstellt, die Mathe-Lehrzwecken mit Canvas-Grafiken dient.


Grafik-Grundkenntnisse auffrischen ... Weblinks OpenGL, WebGL, SVG, Canvas

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 benö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.


Grafischer Device-Context DC und Canvas

Wird in der Veranstaltung behandelt.

Neu: canvas.toDataURL() ctx.setTransform() ?ctx.getTransform() ?ctx.resetTransform() meint ctx.setTransform(1,0,0,1,0,0) var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var a = 0.866, c =-0.500, e = 0, b = 0.500, d = 0.866, f = 0; ctx.setTransform(a,b, c,d, e,f); ctx.fillRect(0, 0, 100, 100);

Gesichtspunkte für die zu entwickelnde App sind Einfachheit, Robustheit, prägnant Klarheit, Paxisnähe. Die eigenen App-Ideen ( mit Alleinstellungsmerkmal ) können z.B. hin gerichtet sein auf

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.


Canvas ( Funktionsnamen ) Weblinks

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

Canvas Kontext ( ctx und ctx.canvas ) default build-in

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

Canvas und cnv.dataset Store Daten in Canvas-Tag

Wie können zahlreiche Parameter im Canvas-Tag gespeichert werden? Die Speicherung von numerischen Werten erfolgt als String.

Beispiel: Die Objekt-Properties von
var o = { id: "ID_CANVAS" mod: "isotrop", xmin:0, ymin:0, xmax:300, ymax:300, ... }
werden als Strings cnv.dataset.myParameters in "ID_CANVAS" hinterlegt.

 function get_cnv(id) { 
   return document.getElemenById(id).getContext('2d'); 
 }

 function set_cnv_data(o) { 
       var i, k, keys = Object.keys(o), 
                  cnv = get_cnv(o.id);
   if (!o.imin) { cnv.dataset.imin = 0; }
   if (!o.imax) { cnv.dataset.imax = cnv.width; }
   if (!o.jmin) { cnv.dataset.jmin = cnv.height; }
   if (!o.jmax) { cnv.dataset.jmax = 0; }
   for (i = 0; i < keys.length; i += 1) { 
     k = keys[i]; cnv.dataset[k] = o[k]; 
   }
 }

// global: 
var MY_CANVAS_NUM_KEYS = ["imin", "imax", "jmin", "jmax", 
                          "xmin", "xmax", "ymin", "ymax", 
                          "xTi", "xSi", "yTj", "ySj", "xMou", "yMou"]; 

function get_cnv_data(id) { var i, k, r = Object.create(null), 
 cnv = get_cnv(id), keys = Object.keys( cnv.dataset );

 for (i = 0; i < MY_CANVAS_NUM_KEYS.length; i += 1) { 
   k = MY_CANVAS_NUM_KEYS[i];  
   r[k] = parseFloat(cnv.dataset[k]); 
 } return Object.create(r);
 }


Hinweise: Debug-Console Laufzeit-Werte

Zum schrittweisen Untersuchen des Programmflußes gehören zahlreiche Werte von Varialen, Status- und Systemgrößen. Ein valides HTML ist die wichtigste Voraussetzung für das funktionierende Debuggen von Scripten.

Die Console ist besonders einfach zu verwenden, indem Nachrichten als String angezeigt werden. Die Console ermöglicht mehr. Siehe spec.whatwg.org Console .
Anzeige der Console mit der Tastenkombination:

 Chrome-Browser: CMD ALT J 
 Opera-Browser:  CTRL UP J  bzw. CTRL UP I
 IE-Browser:     CTRL UP J  bzw. F12-Taste
 Safari-Browser: CMD ALT C

Beispiel für eine Console-Anzeige von Variablen:

var x = 77777, 
    arr = [ 0, 1, null, "XX" ], 
    obj = { "A": "a", b: 65, c:null };
    console.log("x = ", x);
    console.log("arr = ", arr);
    console.log("obj = ", obj);

Consolen-Anzeige etwa so

 x = 77777
 arr = 0,1,,XX   [object Array]: [0, 1, null, "XX"]
   0: 0
   1: 1
   2: null
   3: "XX"
      length: "4"

obj = [object Object]: {A: "a", b: 65, c: null}
   A: "a"
   b: 65
   c: null
    __proto__: Object

Hinweise: Paramterdarstellung von Kurven x(t), y(t)

Eine interpolierende Kurve geht durch die vorgegebenen Punkten. Eine approximierende Kurve geht durch/und/oder "angenähert" zu den vorgegebenen Punkten (polynomiale Ausgleichskurven, 2D-parametrische Ausgleichskurven ( curve fit ) .. ).

Wie lauten die x(t)-, y(t) - Formeln (Paramterdarstellung) der Geraden, wenn die beiden Geraden-Punkte P1(x1,y1) und P2(x2,y2) gegeben sind?

 // Gerade:
 x(t) = (1-t)·x1  + t·x2     // Gegebene Punkte 
 y(t) = (1-t)·y1  + t·y2     // P1(x1,y1)  und P2(x2,y2)

Für <= t < 1; 0 <= x < 1; ergeben sich Geraden-Punkte P(x,y) die zwischen P1(x1,y1) und P2(x2,y2) liegen.

Für eine Ellipse:

  // Ellipse:
  x(t) = x0 + a·cos(2·π·t)      // Ellipsen-Mittelpunkt (x0, y0) 
  y(t) = y0 + b·sin(2·π·t)      // Ellipsen-Halbachsen  ( a, b )

Für 0.00 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der Ellipse-Linie.
Für 0.50 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der "unteren" Ellipse^n-Linie.
Mit k = 0.,1.,2.,3 ergeben sich für 0.25·k <= t < 0.25·(k+1) Ellipsen-Punkte P(x,y) auf der Ellipse im "k-ten Quadranten".


ECMAScript: Funktionen dynamisch erzeugen new Function()

Wie können zum Zeichnen von mathematischen Funktionen y(x) die ECMAScript-Funktionen per Textarea-Text dynamisch erzeugt werden? Siehe z.B. im Quelltext dieser Seite die Funktion parse_tilde_key_val_strings_in_GLOB_VAR(s). Anstelle von einfachen Funktionen y(x) sind Ortskurven x(t),y(t) universeller, denn wenn x := t gesetzt wird, ergibt sich y(t) = y(x).


test_anzeige()

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 22.4. um 12.00 Uhr