JavaScript - Einführung

JavaScript - Einführung
Einfache Ausgabeanweisung <html><head> <title>Javascript</title></head> <body bgcolor=#EEE685 > <script>  </script> </body> </html> Autor: H.Sporenberg

alert <html><head> <title>JavaScript</title> </head> <body bgcolor="yellow"> <h1>alert</h1> <script>  </script> </body> </html> Autor: H.Sporenberg

alert mit Funktionsaufruf <html><head> <title>JavaScript</title> <script>  </script> </head> <body bgcolor="yellow"> <h1>Alert-Ausgabe</h1> <A href="javascript:HalloWelt()">Hallo</A> </body> </html> Autor: H.Sporenberg

alert mit Funktionsaufruf <html><head> <title>JavaScript</title> <script>  </script> </head> <body bgcolor="yellow"> <h1>Alert - Ausgabe</h1> <form name="Hallo"> <input type="button" name="schalter" value="Klick mich" onClick="HalloWelt()"> </form> </body> </html> Autor: H.Sporenberg

Textfelder mit CSS verändern Stylesheet-Rahmen (Borders) ermöglichen die Verzierung von Tabellen, Inputfeldern und Schaltflächen mit Einzellinien. Auf diese Weise lassen sich auch Eingabefelder farblich verändern. Rot eingerahmt <input type="TEXT" name="name2" size="30" style="BORDER-RIGHT: red thin solid; BORDER-LEFT: red thin solid; BORDER-TOP: red thin solid; BORDER-BOTTOM: red thin solid"> Autor: H.Sporenberg

Textfelder mit CSS verändern Farbig eingerahmt <input type="TEXT" name="name" size="30" style="BORDER-RIGHT: blue thin solid; BORDER-LEFT: green thin solid; BORDER-TOP: red thin solid; BORDER-BOTTOM: purple thin solid"> Links und rechts offen <body bgcolor=#EEE685 > <form name="TextFeld"> <input type="TEXT" name="name" size="30" style="BORDER-RIGHT: #EEE685 thin solid; BORDER-LEFT: #EEE685 thin solid; BORDER-TOP: blue thin solid; BORDER-BOTTOM: blue thin solid;"> </form> </body> Autor: H.Sporenberg

Funktionsaufruf und Parameterübergabe <html><head> <title>JavaScript</title> <script>  </script> </head> <body bgcolor="yellow"> <form name="Formular"> <input type="integer" name="Zahl1" value=""><br> <input type="button" name="Knopf" value="Berechnung" onClick="quadrat(Formular.Zahl1.value)"> </form> </body> </html> Autor: H.Sporenberg

Funktionsaufruf und Parameterübergabe <html><head> <title>JavaScript</title> <script>  </script> </head> <body bgcolor="yellow"> <form name="Formular"> <input type="integer" name="Zahl1" value=""><br> <input type="button" name="Knopf" value="Berechnung" onClick="quadrat(Formular.Zahl1.value)"> </form> </body> </html> Autor: H.Sporenberg

Funktionsaufruf und Parameterübergabe <html><head> <title>JavaScript</title> <script>  </script> </head> <body bgcolor="yellow"> <form name="Formular"> <input type="integer" name="Zahl1" value=""><br> <input type="button" name="Knopf" value="Berechnung" onClick="quadrat(Formular.Zahl1.value)"><br><br> Das Ergebnis lautet: <input type="text" name="Ausgabe" value=""> </form> </body></html> Autor: H.Sporenberg

Addition zweier Zahlen function addition(zahl1,zahl2) { var summe; summe = parseFloat(zahl1)+parseFloat(zahl2); document.Formular.Ausgabe.value = summe;} Bitte geben Sie zwei Zahlen ein: <form name="Formular"> <input type="integer" name="Zahl1" value=""><br> <input type="integer" name="Zahl2" value=""><br> <input type="button" name="Knopf" value="Berechnung" onClick="addition(Formular.Zahl1.value,Formual.Zahl2.value)"><br> Das Ergebnis lautet: <input type="text" name="Ausgabe" value=""> </form> Autor: H.Sporenberg

Der Taschenrechner – eine Taste <style type="text/css">  </style> Autor: H.Sporenberg

Der Taschenrechner – eine Taste <style type="text/css">  </style> <form name="Rechner"> <table border="0" cellpadding="0" cellspacing="3"> <tr> <td><input type="button" width="60" class="button" value=" 7 "> </td> </tr> </table> </form> Autor: H.Sporenberg

Der Taschenrechner - Tastenfeld <form name="Rechner"> <table border="0" cellpadding="0" cellspacing="3"> <tr> <td><input type="button" width="60" class="button" value=" 7 " ></td> <td><input type="button" width="60" class="button" value=" 8 " ></td> <td><input type="button" width="60" class="button" value=" 9 " ></td> <td><input type="button" width="60" class="button" value=" + " ></td> </tr> <tr>2. Zeile ………. usw. </table> </form> Autor: H.Sporenberg

Der Taschenrechner – Das Display <form name="Rechner"> <table border="5" cellpadding="10" cellspacing="0"> <tr> <td bgcolor="#CDCDCD"> <input type="text" name="Display" align="right" class="display"></td> </tr> <td bgcolor="#E0E0E0"> <table border="0" cellpadding="0" cellspacing="3"> Hier werden die Tasten vereinbart </table> </td></tr> </table> </form> Autor: H.Sporenberg

Der Taschenrechner Die Funktion Hinzufuegen function Hinzufuegen(Zeichen) { window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen; } In der Tabelle muss der Aufruf der Funktion Hinzufuegen ('7') jeweils mit dem richtigen Symbol ergänzt werden <td><input type="button" width="60" class="button" value=" 7 " onClick="Hinzufuegen('7')"></td> Autor: H.Sporenberg

Der Taschenrechner Die Funktion Ergebnis function Ergebnis() { var x = 0; x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; } In der Tabelle muss der Aufruf der Funktion Ergebnis() beim Button mit dem Wert = hinzugefügt werden <td><input type="button" width="60" class="button" value=" = " onClick=“Ergebnis()"></td> Der Befehl eval ist in JavaScript implementiert und wertet einen mathematisch korrekten Ausdruck aus. Autor: H.Sporenberg

Der Taschenrechner Die Funktion Ergebnis function Ergebnis() { var x = 0; if (Check(window.document.Rechner.Display.value)) x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; } Bevor der Ausdruck ausgewertet wird, muss dieser auf seine mathematische Richtigkeit überprüft werden. Dies geschieht mit der Funktion Check. Diese Funktion ist viel komplizierter als die Auswertung des Ausdrucks und soll hier ohne Kommentar angegeben werden. Autor: H.Sporenberg

Der Taschenrechner Die Funktion Ergebnis function Ergebnis() { var x = 0; if (Check(window.document.Rechner.Display.value)) x = eval(window.document.Rechner.Display.value); window.document.Rechner.Display.value = x; } Die Funktion Check überprüft, ob der eingegebene Ausdruck der mathemati-schen Syntax genügt. function Check(Eingabe) { var nur_das =" []()-+*%/"; for (var i = 0; i < Eingabe.length; i++) if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false; return true; } Autor: H.Sporenberg

Der Taschenrechner Es soll eine Taste eingefügt werden, die die Eingabe löscht. Die Taste soll über die gesamte Breite des Taschenrechners gehen. function Loeschen(){ window.document.Rechner.Display.value="";} .button1 { width:280px; text-align:center; font-family:Verdana,Arial; font-size:170%; } ……. <tr><td colspan=4><input type="button" width="60" class="button1" value="Clear" onClick="Loeschen()"></td></tr> …… Autor: H.Sporenberg

Der Taschenrechner Es soll eine Taste eingefügt werden, die die Eingabe löscht. Die Taste soll über die gesamte Breite des Taschenrechners gehen. Es geht auch ohne JavaScript-Funktion. Dazu benutzt man den Reset-Button .button1 { width:280px; text-align:center; font-family:Verdana,Arial; font-size:170%; } ……. <td> <input type="reset" width=“280" class="button1" value=" Clear "> </td> …… Autor: H.Sporenberg

Felder – Arrays Teil 1 var namen=new Array(4); namen[0]="Sporenberg"; namen[1]="Teepe"; namen[2]="Gutjahr"; namen[3]="Lindemann"; var i=0; function Weiter() {document.Formular.Ausgabe.value=namen[i]; i=i+1;} <form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 1 var namen=new Array(4); namen[0]="Sporenberg"; namen[1]="Teepe"; namen[2]="Gutjahr"; namen[3]="Lindemann"; var i=0; function Back() {document.Formular.Ausgabe.value=namen[i]; i=i-1;} <form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name="Forward" value=“Zurueck" onClick=“Back()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 1 var namen=new Array(4); namen[0]="Sporenberg"; namen[1]="Teepe"; namen[2]="Gutjahr"; namen[3]="Lindemann"; var i=-1; function Weiter(){ i=i+1; if (i>=namen.length-1) { i =namen.length-1; }; document.Formular.Ausgabe.value=namen[i]; } <form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Back()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 1 var namen=new Array(4); namen[0]="Sporenberg"; namen[1]="Teepe"; namen[2]="Gutjahr"; namen[3]="Lindemann"; var i=-1; function Zurueck(){ i=i-1; if (i <=0) { i =0; }; document.Formular.Ausgabe.value=namen[i]; } <form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Zurueck()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 1 var namen=new Array(4); namen[0]="Sporenberg"; namen[1]="Teepe"; namen[2]="Gutjahr"; namen[3]="Lindemann"; var i=-1; function Loeschen(){ i = -1; document.Formular.Ausgabe.value="";} <form name="Formular"> <input type="text" name="Ausgabe" value=""> <input type="button" name="Forward" value="Vorwärts" onClick="Weiter()"> <input type="button" name=“Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name=“Clear" value=“Löschen" onClick=“Loeschen()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 2 Dia-Show var fotos=new Array(4); fotos[0]="Auto1.jpg"; fotos[1]="Auto2.jpg"; fotos[2]="Auto3.jpg"; fotos[3]="Auto4.jpg"; i=-1; function Weiter(){ i=i+1; if (i>=fotos.length-1) { i =fotos.length-1; }; document.Formular.bild.src=fotos[i]; } <form name="Formular"> <img src="auto1.jpg" name="bild" > <input type="button" name="Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name="Forward" value=“Vorwärts" onClick=“Weiter()"> <input type="button" name="Clear" value=“Löschen" onClick=“Loeschen()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 2 Dia-Show var fotos=new Array(4); fotos[0]="Auto1.jpg"; fotos[1]="Auto2.jpg"; fotos[2]="Auto3.jpg"; fotos[3]="Auto4.jpg"; i=-1; function Zurueck(){ i=i-1; if (i <=0) { i =0; }; document.Formular.bild.src=fotos[i]; } <form name="Formular"> <img src="auto1.jpg" name="bild" > <input type="button" name="Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name="Forward" value=“Vorwärts" onClick=“Weiter()"> <input type="button" name="Clear" value=“Löschen" onClick=“Loeschen()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 2 Dia-Show var fotos=new Array(4); fotos[0]="Auto1.jpg"; fotos[1]="Auto2.jpg"; fotos[2]="Auto3.jpg"; fotos[3]="Auto4.jpg"; i=-1; function Loeschen(){ i=-1; document.Formular.bild.src="Auto1.jpg";} <form name="Formular"> <img src="auto1.jpg" name="bild" > <input type="button" name="Back" value=“Zurück" onClick=“Zurueck()"> <input type="button" name="Forward" value=“Vorwärts" onClick=“Weiter()"> <input type="button" name="Clear" value=“Löschen" onClick=“Loeschen()"> </form> Autor: H.Sporenberg

Felder – Arrays Teil 2 Dia-Show Autor: H.Sporenberg

Felder – Arrays Teil 3 Textarea Es sollen jetzt beide Felder, Text und Bilder, zusammengefügt werden. Dabei sollen Text und Bild gleichzeitig vor- und rückwärts geblättert werden. Der Text soll nicht über den Input-Text sondern über eine Textarea ausgegeben werden. Projekte könnten sein: 1.Die sieben Weltwunder Zu den Bildern der sieben Weltwunder wird in der Textarea die entsprechende Information angezeigt. 2.Einige herausragende Sportwagen mit den entsprechenden Daten, wie Höchstgeschwindigkeit, Preis, Beschleunigung etc. 3.Die Planeten des Sonnensystems mit den entsprechenden Daten, wie Entfernung zur Sonne, Umlaufdauer etc. Autor: H.Sporenberg

Felder – Arrays Teil 3 Textarea var fotos=new Array(4); fotos[0]="Auto1.jpg"; fotos[1]="Auto2.jpg"; fotos[2]="Auto3.jpg"; fotos[3]="Auto4.jpg"; var info=new Array(4); info[0]=„Porsche"; info[1]=„Veyron"; info[2]=„Porsche Carrera"; info[3]=„Ferrari"; i=-1; function nullsetzen() { i=-1; document.Formular.Meinung.value=info[0]; document.Formular.bild.src=fotos[0];} function weiter() { i=i+1; if (i>=info.length-1) { i =info.length-1; }; document.Formular.Meinung.value=info[i]; document.Formular.bild.src=fotos[i]; } function zurueck() { i=i-1; if (i <=0) { i =0; }; document.Formular.Meinung.value=info[i]; document.Formular.bild.src=fotos[i]; } Autor: H.Sporenberg

Felder – Arrays Teil 3 Textarea <body> <form name="Formular"> <table><tr> <td width=640 height=480><img src="auto1.jpg" name="bild" ></td> <td><Textarea class="text" name="Meinung" wrap=virtual> Sporenberg Heinz</Textarea></td> </tr> </table> <center><table width=30%> <tr><td> <input type="button" name="Back" value="Back" onClick="zurueck()"></td> <td> <input type="button" name="Forward" value="Forward" onClick="weiter()"></td> <td> <input type="button" name="Clear" value="Clear" onClick="nullsetzen()"></td> </tr></table></center> </form> </body> Die Funktionen für das Einfügen von Namen werden genauso übernommen. Autor: H.Sporenberg

Felder – Arrays Teil 3 Textarea <style type="text/css">  </style> Autor: H.Sporenberg

Projekt – Sportwagen-Autoquartett Jetzt sollen die beiden Möglichkeiten, Texte und Bilder weiterzu-blättern kombiniert wer-den. Als Beispiel sollen hier Bilder von Sportwa-gen (nicht umweltver-träglich – problema-tisch) weitergeblättert werden, gleichzeitig erscheinen in Textfel-dern Daten über das gerade dargestellt Auto wie Höchstgeschwin-digkeit, Verbrauch. Leistung etc. (ähnlich dem Autoquartett). Autor: H.Sporenberg

Projekt – Sportwagen-Autoquartett Die Struktur der Seite wird vorgegeben: In einer Tabelle werden zwei Datenfelder erzeugt. Im linken Datenfeld soll das Bild erscheinen, im rechten Datenfeld wird eine Tabelle eingefügt, die sowohl die Informationen bzgl. des angezeigten Autos anzeigt als auch die Buttons enthält, die das Vor- und Rückwärtsblättern durchführen. <Tab> <tr><td> bild </td> <td> Hier wird die Tabelle für das rechte Datenelement eingefügt </td> </tr> </Tab> Bild Informationen Autor: H.Sporenberg

Projekt – Sportwagen-Autoquartett <table cellspacing=10 width=90%> <tr><td colspan=3> <input type="text" class="schrift33" name="Ausgabe" size=35 value="Porsche"> </td></tr> <tr bgcolor=#F0E68C div class="schrift32"> <td colspan=2><b>Geschwindigkeit:</b></td> <td><input type="text" class="schrift32" name="Geschwindigkeit" size=20 value="280 km/h"></td></div></tr> <tr><td bgcolor=#FFD39B><center> <input type="button" class="schrift31" name="Back" value="Back" onClick="zurueck()"></center></td> <td bgcolor=#CDC673><center> <input type="button" class="schrift31" name="Forward" value="Forward" onClick="weiter()"></center></td> <td bgcolor=#8B864E><center> <input type="button" class="schrift31" name="Clear" value="Clear" onClick="nullsetzen()"><br> </center></td></tr> </table> Autor: H.Sporenberg

Uhrzeit anzeigen function uhr() { var Heute=new Date(); var Stunde = Heute.getHours(); document.Formular.stunden.value = Stunde; setTimeout("uhr()",100);} <body onLoad="uhr()"> <form name="Formular"> <input type="text" name="stunden" size=8 value=""> </form> Autor: H.Sporenberg

Uhrzeit anzeigen function uhr() { var Heute=new Date(); var Stunde = Heute.getHours(); var Minuten = Heute.getMinutes(); var Sekunden = Heute.getSeconds(); document.Formular.stunden.value = Stunde; document.Formular.minuten.value = Minuten; document.Formular.sekunden.value = Sekunden; setTimeout("uhr()",100); } <body onLoad="uhr()"> <form name="Formular"> <input type="text" name="stunden" size=8 value=""> <input type="text" name="minuten" size=8 value=""> <input type="text" name="sekunden" size=8 value=""> </form> </body> Autor: H.Sporenberg

Tag, Monat und Jahr anzeigen …… var Tag = Heute.getDate(); var Monat= Heute.getMonth(); var Jahr=Heute.getYear(); document.Formular.tage.value = Tag; document.Formular.monate.value = Monat; document.Formular.jahre.value = Jahr; setTimeout("uhr()",100); } <body onLoad="uhr()"> <form name="Formular"> <input type="text" name=„tage" size=8 value=""> <input type="text" name=„monate" size=8 value=""> <input type="text" name=„jahre" size=8 value=""> </form> </body> Autor: H.Sporenberg

Monatsnamen anzeigen var Tag = Heute.getDate(); var Monat= Heute.getMonth(); var Jahr=Heute.getYear(); if (Monat==0) Monat1="Januar"; if (Monat==1) Monat1="Februar"; usw. document.Formular.monat.value = Monat1; <body onLoad="uhr()"> <form name="Formular"> Heutiger Monat <input type="text" name="monat" size=18 value=""><br> </form> </body> Autor: H.Sporenberg

Stoppuhr var Startzeit, id; function anfang() {var zeit = new Date(); Startzeit = zeit; messen();} <form name=„Clock" > Zeit bisher in Sekunden:<br> <input type="text" name=„Digits" size=8 value=""> <input type="button" value="Start" onClick="anfang()"> <input type="button" value="Stopp" onClick="stopp()"> </form> Autor: H.Sporenberg

Stoppuhr var Startzeit, id; function anfang() {var zeit = new Date(); Startzeit = zeit; messen();} function messen() { var AktuelleZeit=new Date(); var Zeitdifferenz=AktuelleZeit-Startzeit; var Anzeigezeit=Zeitdifferenz/1000; document.Clock.Digits.value=Anzeigezeit; id=setTimeout("messen()",10); } function stopp() { clearTimeout(id); } <form name=„Clock" > Zeit bisher in Sekunden:<br> <input type="text" name=„Digits" size=8 value=""> <input type="button" value="Start" onClick="anfang()"> <input type="button" value="Stopp" onClick="stopp()"> </form> Autor: H.Sporenberg

Stoppuhr – mit Tabelle Autor: H.Sporenberg

Stoppuhr – mit Tabelle <center><h1>Stoppuhr</h1> </center> <form name="clock" > <center> <Table border=7 cellspacing=10 width=70%> <tr bgcolor=#dedede> <td div class="schrift31" >Zeit bisher in Sekunden:</div> </td> <td > <input div class="schrift1" type="text" name="digits" size=12> </div> </td> <td> <center> <input div class="schrift3" type="button" value="Start" onClick="anfang()"></div> </center> </td> <input div class="schrift3" type="button" value="Stopp" onClick="ende()"> </div> </center> </td> <input div class="schrift3" type="button" value="Lösche" onClick="loesche()"> </div> </tr> </table> </center> </form> Autor: H.Sporenberg

Bildertausch Eine der Hauptanwendungen von JavaScript wird lapidar mit Mouseovers bezeichnet. Fährt die Maus über eine Grafik, so ändert diese ihre Gestalt; befindet sich die Maus dann nicht mehr über der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an. Diese Methode kann z.B. benutzt werden, um Bilder zu tauschen. Fährt man mit der Maus über das kleine Bild, so erscheint das große Bild. Autor: H.Sporenberg

Bildertausch <script></script> <body> <img src="GSG_2006_1.jpg" NAME=„bild" onMouseover="over()" onMouseout="out()"> </body> </html> Autor: H.Sporenberg

PopUp-Fenster Viele Seiten versuchen mit zusätzlichen Fenstern beim Laden und Verlassen einer Seite den Besucher einzufangen, um auf Werbung oder den eigenen Newsletter aufmerksam zu machen. Es gibt Webseiten, die einen zur Begrüßung erst einmal mit einem Popup-Gewitter empfangen. Etliche neue Fenster öffnen sich ungefragt und werben für eBay & Co und bei jedem Seitenwechsel geht der Trubel von vorne los. Autor: H.Sporenberg

PopUp-Fenster Autor: H.Sporenberg

PopUp-Fenster <html><head> <title>PopUp-Fenster</title> <script language="JavaScript">  </script> </head> <body bgcolor=#cdcdcd onload="PopUpFenster()"> </body></html> Autor: H.Sporenberg

PopUp-Fenster Folgende Eigenschaften stehen zur Verfügung. Diese stehen in einer Zeile und sind durch Kommata getrennt. window.open(filename,windowname, Attribute) toolbar = yes/no Symbolleiste anzeigen location = yes/no Adresszeile anzeigen directories = yes/no Linkleiste anzeigen status = yes/no Statusbar anzeigen nenubar = yes/no Menüzeile anzeigen scrollbar = yes/no Scrollbalken anzeigen resizable = yes/no Fenstergröße verändern width=420, height=320 Breite und Höhr des Fensters top=150, left=100 Koordinaten des Fensters(oben,links) Autor: H.Sporenberg

Cookies Was sind Cookies? Cookies (amerikan. Keks) sind kleine Informationseinheiten, die Webseiten per JavaScript auf dem Rechner des Anwenders (Client) ablegen und später wieder auslesen können. Der Browser entnimmt die Informationen und speichert sie, mit einer ID sowie dem Ablaufdatum versehen, in einer externen Datei. Ist ein Cookie gespeichert, kann die Webseite wiederum auf das Gespeicherte zugreifen. Sicherheitsbefürchtungen Um in den User-Bereich einer Seite zu gelangen, ist eine Registrierung nötig. Dabei gibt der User unter anderem seine Interessen und Hobbys an, die dann als Cookie beim User gespeichert werden. Surft der Besucher das nächste Mal auf der Webseite, wird der Cookie ausgelesen und der Besucher erhält auf ihn zugeschnittene Werbung. Autor: H.Sporenberg

Cookies Sicherheitsbefürchtungen Heutzutage verwendet fast jede größere Seite Cookies, um die Besucher zu kontrollieren oder mit besserem Inhalt versorgen zu können. Aber: Das Cookie kann nur von dem Server gelesen werden, von dem es auch erzeugt wurde. Ein Cookie kann nicht automatisch an Daten, wie z.B. eine -Adresse kommen, ohne dass der User sie selbst angegeben hat. Ein Sicherheitsrisiko im Sinne von Löschvorgängen oder dem Einschleusen von Viren besteht allerdings nicht. Cookie-Anzahl / Größe Ein Cookie darf bis zu 4 kB groß sein. Hierbei wird der Cookie-Name mitgerechnet. Ist ein Cookie größer, so wird der Cookie-Wert abgeschnitten, der Name bleibt erhalten. Pro Domäne können maximal 20 Cookies gespeichert werden. Autor: H.Sporenberg

Cookies Je nach Anlass wird ein Cookie irgendwo auf einer HTML-Seite aktiviert werden, entweder aus einem Formular heraus oder automatisch beim Anzeigen der Seite. Zum Schreiben und Lesen dient stets das Schlüsselwort cookie. Der IExplorer schreibt eine Textdatei, deren Namen aus der URL des Senders gebildet wird. Er registriert nicht den Namen der aufrufenden Seite sondern den des Ordners, in dem sie sich befinden. Es ist empfehlenswert, die Routine zum Schreiben eines Cookies als JavaScript-Funktion im Head zu definieren. Autor: H.Sporenberg

Cookies schreiben Der Code enthält hier im Beispiel einen Werteintrag und denjenigen der Ablaufzeit. Anzugeben ist mit "Dauer" die Gültigkeitsdauer in Tagen: BEISPIEL Als Beispiel soll ein Cookie angegeben werden, das die Anzahl der Besuche auf einer Seite speichert und dann ausgibt. So sieht‘s aus. Autor: H.Sporenberg

Cookies schreiben function WertHolen() { var Wert = ""; if(document.cookie) { var Wertstart = document.cookie.indexOf("=") + 1; var Wertende = document.cookie.indexOf(";"); if (Wertende == -1) {Wertende = document.cookie.length;} Wert = document.cookie.substring(Wertstart,Wertende); } return Wert;} function WertSetzen(Bezeichner, Wert, Verfall) { var jetzt = new Date(); var Auszeit = new Date(jetzt.getTime() + Verfall); document.cookie = Bezeichner+"="+Wert+"; expires="+Auszeit.toGMTString()+";";} Autor: H.Sporenberg

Cookies schreiben function Zaehlerstand() { var Verfallszeit = 1000*60*60*24*365; var Anzahl = WertHolen(); var Zaehler = 0; if(Anzahl != "") {Zaehler = parseInt(Anzahl);} if(document.cookie) { Zaehler = Zaehler + 1; WertSetzen("Zaehler",Zaehler,Verfallszeit); } else { Zaehler = 1; return(Zaehler); } Autor: H.Sporenberg

Cookies schreiben <script type="text/javascript">  </script> <p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p> Autor: H.Sporenberg

Cookies - Aufgaben 1.Aufgabe: Erstellen Sie eine Seite mit zwei Links. Wenn man auf den ersten klickt, soll ein Cookie mit dem Inhalt "Nachtisch=Kekse" gesetzt werden. Ein Klick auf den zweiten Link soll den Cookie-Inhalt in einem alert-Dialog ausgeben. Der Cookie muss nicht für längere Zeit gespeichert werden. 2.Aufgabe: Wenn Sie zwei Cookies mit demselben Namen anlegen, überschreibt der zweite den ersten. Löschen Sie den Cookie von Aufgabe 1, indem Sie ihn nochmal setzen, diesmal aber mit einem vergangenen expires-Attribut. Autor: H.Sporenberg

Cookies - Aufgaben 3.Aufgabe: Schreiben Sie eine Funktion, die überprüft, ob der Besucher Ihrer Seite Cookies aktiviert hat. 4.Aufgabe: Einige Browser erlauben die (recht unbequeme) Option, dass jeder Versuch, einen Cookie zu setzen, eigens bestätigt werden muss. Ändern Sie die Cookietest-Funktion von Übung 3, so dass sie einen von drei Werten zurückliefert: 0 wenn Cookies deaktiviert sind, 1 wenn sie aktiviert sind und nicht bestätigt werden müssen, 2 wenn jedesmal eine Bestätigung nötig ist. Autor: H.Sporenberg

Cookies - Aufgaben 5.Aufgabe: Wie Sie wissen, liefert document.cookie oft nicht nur einen Cookie, sondern eine Liste aller Cookies, die für die Seite zugänglich sind. Schreiben Sie eine allgemein verwendbare Funktion liesCookie(), die diese Liste nach einem bestimmten Cookie durchsucht. Der Name des Cookies wird als Argument übergeben, die Funktion liefert dann den dazugehörigen Wert zurück. 6.Aufgabe: Auf einer Internetseite sollen die Besucher persönlich begrüßt werden. Dazu werden sie, wenn Cookies aktiviert sind, beim ersten Besuch nach ihrem Namen gefragt. Dieser wird in einem Cookie gespeichert und bei jedem Betreten der Seite ausgelesen und angezeigt. Erstellen Sie diese Seite. Verwenden Sie dabei die Funktionen cookieAktiviert(), liesCookie() und schreibCookie() aus den Übungen 3, 6 und 7. Autor: H.Sporenberg

Cookies – Aufgaben - Lösung 1.Aufgabe: <html><head><title></title></head> <body> <a href="#“ onClick="document.cookie='Nachtisch=Kekse'"> setzen</a> <br> <a href="#" onClick="alert(document.cookie)">lesen</a> </body></html> Autor: H.Sporenberg

Die String-Methode indexOf() Die String-Methode indexOf() durchsucht eine Zeichenkette (String) nach dem ersten Vorkommen des Suchwertes, begin-nend von der angegebenen Position bis zum Ende der Zeichen-kette. Dabei vergleicht sie case sensitive die Zeichenkette ent-sprechend des ihr übergebenen Suchwertes. Ist der gesuchte Wert in der Zeichenkette vorhanden, so wird die Position des Vorkommens zurückgegeben. Wird das Zeichen oder die Zei-chenkette nicht gefunden, so lautet der Rückgabewert -1. function durchsuchen(zeichenkette,teilstring,stelle) {var wo; wo = zeichenkette.indexOf(teilstring,stelle); document.Formular.Ausgabe.value=wo;} Autor: H.Sporenberg

Die String-Methode indexOf() <form name="Formular"> Zeichenkette eingeben <input type="text" name="String1" value=""><br> Suchzeichenkette <input type="text" name="SuchString1" value=""><br> Ab wo soll gesucht werden <input type="integer" name="Position" value=""><br> <input type="button" name="Knopf" value="Zeichenkette" onClick="durchsuchen(Formular.String1.value, Formular.SuchString1.value,Formular.Position.value)"> <br><br> Das Ergebnis lautet: <input type="text" name="Ausgabe" value=""> </form> Achtung: JavaScript beginnt bei der Zählung immer bei 0 Autor: H.Sporenberg

Die String-Methode indexOf() Mit der eben angegebenen Funktion wird jetzt bei der Stellenangabe als erste Stelle die Zahl 0 ausgegeben. Weiterhin wird -1 ausgegeben, wenn das Zeichen bzw. der Suchstring nicht vorhanden sind. Die Funktion soll nun so abgeändert werden, dass die Stelle mit der Zählung bei 1 beginnt. Weiterhin soll ein Text ausgegeben werden, wenn das Zeichen bzw. der Suchstring nicht vorhanden waren. Autor: H.Sporenberg

Die String-Methode indexOf() function durchsuchen(zeichenkette,teilstring,stelle) {var wo; wo = zeichenkette.indexOf(teilstring,stelle); if (wo == -1) {document.Formular.Ausgabe.value=„Das Zeichen ist nicht vorhanden“;} else {document.Formular.Ausgabe.value=wo+1;} } Autor: H.Sporenberg

Kennwort Ein wirklich sicherer Passwortschutz ist mit JavaScript nicht möglich. Dennoch sind verschiedene Verfahren im Einsatz. Fall 1: Das Passwort liegt unverschlüsselt im Programm. Die Abfrage if (passwort=„geheim“) {…….} ist auf jeden Fall nicht anzuraten. Denn damit kann das Passwort durch einen Blick in den Sourcecode ausgelesen werden. Weiter wird das Passwort unverschlüsselt auf dem Server übertragen. In diesem Fall gibt es keine Sicherheit. Autor: H.Sporenberg

Kennwort Fall 2: Das Passwort liegt nicht im Programm vor. Die Abfrage if(passwort!="" && passwort!=null) benutzt kein gespeichertes Passwort im HTML-Code. Eine Schwäche ist, dass das Passwort über eine unsichere Verbindung unverschlüsselt übertragen wird. Es ist von jedem Benutzer zu lesen, der Zugriff auf das Filesystem des Servers hat. In diesem Fall ist die Sicherheit gering. Diese basiert lediglich auf der Tatsache, dass das Raten des Passwortes zwar möglich, aber das Ausprobieren über die Netzverbindung praktisch nicht möglich ist, wenn der Dateiname entsprechend lang ist. Autor: H.Sporenberg

Kennwort <html><head> <title>Passwortabfrage</title> <script language="JavaScript" type="text/javascript">  </script> </head> <body> onLoad="Kennwort()"> </body> </html> Autor: H.Sporenberg

Kennwort window.location=passwort + ".html"; Die Datei, die aufgerufen wird, muss auf dem Server in der Form Passwort.html vorliegen Autor: H.Sporenberg

Graphik mit Hilfe von JavaScript JavaScript ist eine Pro-grammiersprache, die eigentlich keine Grafik-Fähigkeit mitbringt. Diese JavaScript-Vektorgrafik-bibliothek implementiert Funktionen für Grafik-Grundelemente wie Linien, Kreise, Ellipsen (Ovale), Polygone (auch Dreiecke, Rechtecke) und Polylinien (geknickte Linien), und kann solche Elemente dy-namisch in eine Webseite zeichnen. Autor: H.Sporenberg

Graphik mit Hilfe von JavaScript <script type="text/javascript" src="wz_jsgraphics.js"> </script> </head> <script> var jg = new jsGraphics(); function Zeichnen(){ jg.setStroke(4); jg.setColor("#00ff00"); jg.fillEllipse(20,100,100,180); jg.paint(); } Zeichnen(); </script> Dieser Teil gehört in den Head. Dieser Teil gehört in den Body. Autor: H.Sporenberg

Graphik mit Hilfe von JavaScript So können die Graphik-Elemente aussehen Autor: H.Sporenberg

JavaScript - Einführung Graphik mit Hilfe von JavaScript <script> var jg = new jsGraphics(); function zeichnen() { jg.setStroke(6); jg.setColor("#ff00ff"); jg.drawLine(10,300, 1000,300); jg.drawLine(500,0, 500,600); jg.setColor("#343434"); jg.setFont("verdana","18px",Font.BOLD); jg.drawString("x-Achse", 900,320); jg.paint(); var x1,y1,x2,y2; x1=0; y1=1/500*parseInt(x1)*parseInt(x1); jg.setStroke(4); while (x1<400){ x2=parseInt(x1)+1; y2=1/500*parseInt(x2)*parseInt(x2); jg.setColor("#ff0000"); jg.drawLine(x1+500,-y1+300,x2+500,-y2+300); jg.paint(); x1=parseInt(x1)+1; y1=1/500*parseInt(x1)*parseInt(x1); } } zeichnen(); </script> Autor: H.Sporenberg

JavaScript - Einführung Graphik mit Hilfe von JavaScript Autor: H.Sporenberg

Primzahlüberprüfung <html> <head> <title>Test</title> <script type="text/javascript"> function PrimzahlCheck (Zahl) { var Grenzzahl = Zahl / 2; var Check = 1; for (var i = 2; i <= Grenzzahl; i++) if (Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if (Check == 1) alert(Zahl + " ist eine Primzahl!"); </script> </head> Autor: H.Sporenberg

Primzahlüberprüfung <body> <form name="PrimzahlFormular" action=""> <p>Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.</p> <input type="text" name="Eingabezahl"> <input type="button" value="auf Primzahl checken" onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)"> </form> </body> </html> Autor: H.Sporenberg

CANVAS Das <canvas>-Element – neu in HTML5 Mit <canvas> wurde ein HTML-Element eingeführt, mit dem dynamisch Bitmap-Grafiken gerendert und in Dokumente integriert werden können. Zum Erstellen/Zeichnen kann eine Scriptsprache zum Einsatz kommen. Wir verwenden aus naheliegenden Gründen JavaScript. Wie bindet man das <canvas>-Element ein? Sowohl ein öffnender als auch ein schließender Tag werden für <canvas> gebraucht. Breite und Höhe sollten als Attribute angegeben werden – wenn man die Maße per CSS festlegt, wird der <canvas>-Inhalt ausgehend von der Ausgangsgröße entsprechend verzerrt. Autor: H.Sporenberg

Das <canvas>-Element – das Koordinatenkreuz Die Größe der canvas sollte immer angegeben werden. Die voreingestellte Grundgröße ist: height=150 (pixel) und width= Der Nullpunkt des Koordinatensystem ist die linke obere Ecke (0/0). Nach rechts erhält man wachsende positive x-Werte, nach unten wachsende positive y-Werte. Autor: H.Sporenberg

Das <canvas>-Element – das Grundgerüst <html> <head> <title>Canvas </title> <script type="application/javascript„> function draw() { var canvas = document.getElementById(`testcanvas`); var context = canvas.getContext('2d'); if(canvas.getContext){ context.fillStyle = "rgb(0, 0,255)"; context.fillRect(10, 10, 200, 200); } } </script> </head> <body onload="draw()"> <canvas id=„testcanvas" width="300" height="300"></canvas> </body> </html> Autor: H.Sporenberg

Das <canvas>-Element – das Grundgerüst Erläuterung: var canvas = document.getElementById(`testcanvas`); holt das <canvas>-Element anhand seiner ID var context = canvas.getContext('2d'); holt den 2D-Context in die handliche context-Variable. Das wird benötigt, weil letztlich nicht auf dem <canvas>-Element selbst, sondern auf einem Context des Elements gezeichnet wird. context.fillStyle = "rgb(0, 0, 255)“; setzt die Füllfarbe für alles, was danach im Context gezeichnet wird, auf Blau context.fillRect(10,10,200,200); zeichnet ein gefülltes Rechteck, beginnend bei den Koordinaten 0,0 und endend mit 200,200 Autor: H.Sporenberg

Das <canvas>-Element – das Grundgerüst <html> <head> <title>Canvas </title> <script type="application/javascript„> function draw() { var canvas = document.getElementById(`testcanvas`); var context = canvas.getContext('2d'); if(canvas.getContext){ context.fillStyle = "rgb(0, 0,255)"; context.fillRect(10, 10, 200, 200); } } </script> </head> <body onload="draw()"> <canvas id=„testcanvas" width="300" height="300"></canvas> </body> </html> Und so sieht es aus Autor: H.Sporenberg

Das <canvas>-Element – das Grundgerüst Der Internet Explorer 8 kann das <canvas>-Element ohne zusätzliche JavaScript-Funktionen nicht darstellen. Um Fehlermeldungen zu vermeiden und dem User mitzuteilen, dass der Browser dies Funktionen nicht ausführen kann, baut man im Body-Tag entsprechende Meldungen ein. Dieses kann wie folgt aussehen: <body onLoad=“draw()“> <canvas id=„testcanvas" width="800" height="200"> <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter Canvas-Unterstützung.</p> </canvas> <noscript> <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter JavaScript-Unterstützung.</p> </noscript> </body> Autor: H.Sporenberg

Das <canvas>-Element – Linien zeichnen Das Erstellen von Linien geschieht mit der Methode lineTo, die als Parameter den Endpunkt der zu zeichnenden Gerade enthält. Parameter: lineTo( x-Koordinate, y-Koordinate ) Um den Startpunkt der Geraden zu verlegen, nutzt man die Funktion moveTo, die ebenfalls einen x- und y-Wert als Parameter erwartet. Durch moveTo kann man sich frei im (virtuellen) “Raum” bewegen. Parameter: moveTo( x-Koordinate, y-Koordinate ) Um zusammengesetzte Linien zu zeichnen, verwendet man die Path-Funktion, die mit beginPath eingeleitet wird. Die danach folgenden Anweisungen wie lineTo geben die Eckpunkte des Pfades an. Autor: H.Sporenberg

Das <canvas>-Element – Linien zeichnen Mit den anschließend notierten Methoden fill oder stroke entscheidet man, ob die neu geschaffene Form ausgefüllt oder nur umrandet dargestellt werden soll. Es existiert auch eine closePath-Method zum Festlegen des Pfadendes, die bei Verwendung von fill getrost weggelassen werden kann. Hierbei werden der erste und der letzte Punkt automatisch miteinander verbunden und es ergibt sich somit eine selbstdefinierte “Form”. function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.strokeStyle="#000099"; ctx.stroke(); ctx.closePath(); } Autor: H.Sporenberg

Das <canvas>-Element – Linien zeichnen function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.strokeStyle="#000099"; ctx.stroke(); ctx.closePath(); } Und so sieht es aus <body onload="draw()"> <canvas id=„canvas" width="300" height="300"> </canvas> </body> Autor: H.Sporenberg

Das <canvas>-Element – Linien zeichnen function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(25,25); ctx.lineTo(305,25); ctx.lineTo(25,305); ctx.lineTo(25,25); ctx.fillStyle="#33ee99"; ctx.fill(); ctx.closePath(); } Und so sieht es aus, wenn die Fläche, die von den Linien umrandet wird, mit einer Farbe ausgefüllt wird. <body onload="draw()"> <canvas id=„canvas" width="300" height="300"> </canvas> </body> Autor: H.Sporenberg

Das <canvas>-Element – Linien zeichnen function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth=8; ctx.fillStyle = "rgba(10,10,200,0.7)"; ctx.beginPath(); ctx.strokeStyle = "#444444"; ctx.moveTo( 25, 25 ); ctx.lineTo( 305, 25 ); ctx.lineTo( 25, 305 ); ctx.lineTo( 25, 25 ); ctx.stroke(); ctx.fill(); ctx.closePath(); } Und so sieht es aus, wenn beides kombiniert wird. <body onload="draw()"> <canvas id=„canvas" width="300" height="300"> </canvas> </body> Autor: H.Sporenberg

Das <canvas>-Element – Linien mit unterschiedlichen Farben function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // draw a 10 pix green line context.beginPath(); context.strokeStyle='#00cc00'; context.lineWidth=10; context.moveTo(100,0); context.lineTo(100,1000); context.stroke(); context.closePath(); // draw a 20 pix red line context.strokeStyle='#cc0000'; context.lineWidth=20; context.moveTo(140,0); context.lineTo(140,1000); } Autor: H.Sporenberg

Das <canvas>-Element – Bundestagswahlergebnisse 2009 Auf der Canvas-Fläche sollen die Ergebnisse der Bundestagswahl 2009 dargestellt werden. Dazu wird ein Säulendiagramm ver-wendet. Unter den Säulen sollen die Namen der entsprechenden Parteien stehen, auf den Balken die dazugehörigen Prozentzahlen. Autor: H.Sporenberg

Das <canvas>-Element – Bundestagswahlergebnisse 2009 function draw(){ var canvas = document.getElementById('testcanvas'); var ctx = canvas.getContext('2d'); if(canvas.getContext){ ctx.beginPath(); ctx.font = "11pt Verdana";//Schriftart ctx.fillStyle = "#222222"; // Textfarbe ctx.fillText("SPD", 30, 230); ctx.fillText("23,0%", 27, 80); ctx.fillText("CDU/CSU", 100, 230); ctx.fillText("33,8%", 111, 15); ctx.fillText("FDP", 195, 230); ctx.fillText("14,6%", 190, 110); ctx.fillText("DIE LINKE", 255, 230); ctx.fillText("11,9%", 270, 130); ctx.fillText("DIE GRÜNEN", 345, 230); ctx.fillText("10,7%", 340, 135); Hier wird die Beschriftung durchgeführt Autor: H.Sporenberg

Das <canvas>-Element – Bundestagswahlergebnisse 2009 ctx.font = "18pt Verdana"; ctx.fillStyle = "#000000"; ctx.fillText("Bundestagswahl 2009", 50, 290); ctx.lineWidth=8; ctx.strokeStyle = "#444444"; ctx.moveTo( 20, 205 ); ctx.lineTo(450, 205 ); ctx.stroke(); ctx.fillStyle = "rgb(0, 0,255)"; ctx.fillRect(25,90, 50, 105); ctx.fillStyle = "rgb(10,10,10)"; ctx.fillRect(105,22, 50, 173); ctx.fillStyle = "rgb(255,255,10)"; ctx.fillRect(185,122, 50, 73); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(265,135, 50, 60); ctx.fillStyle = "rgb(0,255,0)"; ctx.fillRect(345,140, 50, 55); ctx.fill(); ctx.closePath(); } Hier werden die Säulen gezeichnet. Autor: H.Sporenberg

Das <canvas>-Element – Bundestagswahlergebnisse 2009 Der Vollständigkeit halber, hier der Code im body <body onload="draw()"> <canvas id="testcanvas" width="450" height="400"></canvas> </body> </html> Autor: H.Sporenberg

Das <canvas>-Element – Bundestagswahlergebnisse 2009 So sieht es aus Autor: H.Sporenberg

Das <canvas>-Element – ein Smiley function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.stroke(); ctx.fill(); ctx.arc(120, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill(); ctx.arc(123, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill(); ctx.arc(183, 133, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.fill(); ctx.arc(155, 165, 60, 0, 3, false); ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255, 255, 0)"; ctx.fill(); } Autor: H.Sporenberg

Das <canvas>-Element – Kreis function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // face context.beginPath(); context.lineWidth = 10; context.strokeStyle = “rgb(0, 0, 0)”; context.arc(200, 233, 150, 0, 2 * Math.PI, true); context.stroke(); // color face context.beginPath(); context.fillStyle = “rgba(80, 100, 80, 0.4)”; context.arc(200, 233, 150, 0, 2 * Math.PI, true); context.fill(); // lower lip context.beginPath(); context.moveTo(100, 235); context.bezierCurveTo(105, 270, 200, 480, 300, 232); context.stroke(); // upper lip context.beginPath(); context.moveTo(100, 230); context.bezierCurveTo(100, 230, 200, 380, 300, 230); context.stroke(); // right eye context.lineWidth = 20; context.beginPath(); context.moveTo(230, 130); context.bezierCurveTo(230, 130, 230, 130, 240, 200); context.stroke(); // left eye context.beginPath(); context.moveTo(170, 130); context.bezierCurveTo(170, 130, 170, 130, 160, 200); context.stroke(); Autor: H.Sporenberg

Das <canvas>-Element – arc function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.fillStyle = ”rgb(255, 0, 0)”; context.moveTo(123,93); context.arc(123, 93, 70, 0, 2 * Math.PI, true); context.fill(); } x: x-Koordinate des Kreismittelpunkts y: y-Koordinate des Kreismittelpunkts startWinkel: Startwinkel in rad, gemessen von der positiven x-Achse endWinkel: Endwinkel in rad, gemessen von der positiven x-Achse Richtung: true=gegen den Uhrzeigersinn, false=mit dem Uhrzeigersinn Mit Hilfe der Methode arc können Kreise und Kreisbögen gezeichnet werden. Gezeichnet wird der Kreis(-bogen) ausgehend vom Mittelpunkt (x,y). An diesen wird der Radius angetragen. Die Länge des Kreisbogens hängt vom Start- und Endwinkel ab, der von der positiven x-Achse aus gemessen wird. arc(x, y, Radius, startWinkel, endWinkel, Richtung); Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x, y, Radius, startWinkel, endWinkel, Richtung); x: x-Koordinate des Kreismittelpunkts y: y-Koordinate des Kreismittelpunkts startWinkel: Startwinkel in rad, gemessen von der positiven x-Achse endWinkel: Endwinkel in rad, gemessen von der positiven x-Achse Richtung: true=gegen den Uhrzeigersinn, false=mit dem Uhrzeigersinn Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x,y, Radius,startWinkel, endWinkel, Richtung); Ein gelber Kreis ohne Rand function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.fillStyle = "#ffff00"; // Einstellen der Farbe context.arc(250, 150, 100, 0, 2*Math.PI,true); //Kreis mit Mittelpunkt (250/150) und dem Radius 100, Winkel von 0o bis 360o context.fill(); // Der Kreis wird gefärbt } } Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x,y, Radius,startWinkel, endWinkel, Richtung); Ein gelber Kreis ohne Rand Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x,y, Radius,startWinkel, endWinkel, Richtung); Ein gelber Kreis mit Rand function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.fillStyle = "#ffff00"; // Farbe für den Kreis (gelb) context.strokeStyle="#454545"; // Farbe für den Rand context.lineWidth="8"; // Dicke des Randes context.arc(250, 150, 100, 0, 2*Math.PI,true); //Kreis mit Mittelpunkt (250/150) und dem Radius 100, Winkel von 0o bis 360o context.fill(); // Einfärben des Kreisinneren context.stroke(); // Zeichnen des Randes } } Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x,y, Radius,startWinkel, endWinkel, Richtung); Ein gelber Kreis mit Rand Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x,y, Radius,startWinkel, endWinkel, Richtung); Wichtig: Um Kreisbögen zu zeichnen ist es notwendig, dass man mit Hilfe von moveTo zum Mittelpunkt des Kreises geht. Solange man nur den Kreis mit einer Farbe ausfüllen möchte, ist alles in Ordnung. Wenn jedoch nicht nur das Innere des Kreises gefärbt werden soll, sondern wenn man den Kreisbogen zusätzlich umrahmen möchte, gibt es ein Problem. Ein Streckenzug wird nicht gezeichnet. Autor: H.Sporenberg

Das <canvas>-Element – arc Nur das Inneren des Kreisbogens wird gefärbt. function draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.moveTo(300,200); context.lineTo(200,200); context.fillStyle = "#ffff00"; context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); context.fill(); } Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen gezogen, ein Teil fehlt davon. function draw(){ var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); (6) context.moveTo(200,200); context.fillStyle = "#7cfc00"; context.lineWidth=4; context.strokeStyle="#454545"; (11) context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (12) context.fill(); (13) context.stroke(); }} Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen gezogen, ein Teil fehlt davon. In Zeile 6 wird zum Mittelpunkt des Kreises mit Hilfe von context.moveTo(xko,yko) gegangen. An dieser Stelle (xko,yko) wird dann in Zeile 11 der Kreis angegeben und dann in Zeile 12 mit einer Farbe gefüllt. In Zeile 13 wird der unvollständige Rahmen in der voreingestellten Farbe gezeichnet. Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen um den kompletten Kreisbogen gezogen. Funktioniert nur, wenn der Endwinkel 2*Math.PI ist. function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d'); if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo(300,200); (8) context.lineTo(200,200); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } } Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen um den kompletten Kreisbogen gezogen. function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d'); if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo(300,200); (8) context.lineTo(200,200); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } } In (7) wird der Punkt (300/200) angewählt, mit lineTo in (8) wird ein Strich von (300/200) nach (200/200) gezogen. In (9) bis (11) werden Farbe und Stiftdicke eingestellt. In (13) wird der Kreis um (200/200) mit dem Radius 100 vorbereitet. In (14) wird der Kreisbogen gefärbt, in 15 der restliche Rahmen gezogen Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen um den kompletten Kreisbogen gezogen. Autor: H.Sporenberg

Das <canvas>-Element – arc Es wird ein Rahmen um den kompletten Kreisbogen gezogen. Allgemeiner Fall – nur wenn der Endwinkel 2*Math.PI ist. function draw(){ var canvas = document.getElementById("testcanvas") var context = canvas.getContext('2d'); if(canvas.getContext){ (6) context.beginPath(); (7) context.moveTo (xko+radius,yko); (8) context.lineTo (xko,yko); (9) context.fillStyle = "#7cfc00"; (10)context.lineWidth=4; (11)context.strokeStyle="#454545"; (13)context.arc (xko,yko, radius, 4/5*Math.PI, 2*Math.PI,true); (14)context.fill(); (15)context.stroke(); } } Der Kreis hat den Mittelpunkt M(xko/yko) und den Radius radius. Dann gilt der nebenstehende Code für den allgemeinen Fall. Hier müssen die Werte für xko, yko und radius eingefügt werden: var xko=150; var yko=220; var radius= 120; Autor: H.Sporenberg

Das <canvas>-Element – arc arc(x, y, Radius, startWinkel, endWinkel, Richtung); context.beginPath(); context.arc(100, 100, 50, 0, 1.5 * Math.PI, false); context.lineWidth = 10; context.stroke(); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI, false); context.lineWidth = 10; context.stroke(); context.beginPath(); context.arc(100, 100, 50, Math.PI, 2 * Math.PI, false); context.lineWidth = 10; context.stroke(); Autor: H.Sporenberg

Das <canvas>-Element – arc context.beginPath(); context.arc(100, 100, 50, 1.25 * Math.PI, 1.75 * Math.PI, false); context.lineWidth = 10; context.stroke(); context.beginPath(); context.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false); context.lineWidth = 10; contxt.stroke(); context.beginPath(); context.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false); context.fillStyle = "rgb(255, 255, 0)"; context.fill(); context.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false); context.arc(100, 75, 10, 0, 2 * Math.PI, false); context.fillStyle = "rgb(0, 0, 0)"; Autor: H.Sporenberg

Das <canvas>-Element – arc context.beginPath(); context.arc(100, 100, 50, 1.25 * Math.PI, 1.75 * Math.PI, false); context.lineWidth = 10; context.stroke(); context.beginPath(); context.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false); context.lineWidth = 10; context.stroke(); Autor: H.Sporenberg

Das <canvas>-Element – arc - Smiley ctx.beginPath(); ctx.arc(150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.stroke(); ctx.fill(); ctx.arc(120, 130, 20, 0, 2 * Math.PI, false); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.arc(123, 133, 4, 0, 2 * Math.PI, false); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.beginPath(); ctx.arc(180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.stroke(); ctx.fill(); ctx.arc(183, 133, 4, 0, 2 * Math.PI, false); ctx.fillStyle = "rgb(0, 0, 255)"; ctx.arc(155, 165, 60, 0, 3, false); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255, 255, 0)"; Autor: H.Sporenberg

Das <canvas>-Element – Die olympischen Ringe <script type="text/javascript"> var context; function drawCircle(x,y,radius, rgb){ context.strokeStyle = rgb; context.lineWidth = 3; context.beginPath(); context.arc(x,y,radius,0,Math.PI*2,true); context.stroke(); } function draw(){ context.scale( 3,3); drawCircle(30,30,25,"rgb(0,0,255)"); drawCircle(85,30,25,"rgb(0,0,0)"); drawCircle(140,30,25,"rgb(255,0,0)"); drawCircle(57.5,55,25,"rgb(255,255,0)"); drawCircle(112.5,55,25,"rgb(0,255,0)"); } function init(){ var canvas = document.getElementById('drawingArea'); if (canvas.getContext){ context = canvas.getContext('2d'); draw(); } } </script> </head> <body onLoad="init()"> <canvas id="drawingArea" width="800px" height="400px"></canvas> </body></html> Autor: H.Sporenberg

Das <canvas>-Element – Die olympischen Ringe Autor: H.Sporenberg

Das <canvas>-Element – Die olympischen Ringe function draw(){ var canvas = document.getElementById('Flaeche'); var context; if (canvas.getContext){ context = canvas.getContext('2d'); context.lineWidth = 4;context.scale( 4,4); context.beginPath(); context.strokeStyle = "rgb(0,0,255)"; context.arc(30,30,25,0,Math.PI*2,true); context.stroke(); context.closePath(); context.strokeStyle = "rgb(0,0,0)"; context.arc(85,30,25,0,Math.PI*2,true); context.closePath; context.beginPath(); context.strokeStyle = "rgb(255,0,0)"; context.arc(140,30,25,0,Math.PI*2,true); context.stroke(); context.closePath(); context.strokeStyle = "rgb(255,255,0)"; context.arc(57.5,55,25,0,Math.PI*2,true); context.strokeStyle = "rgb(0,255,0)"; context.arc(112.5,55,25,0,Math.PI*2,true); } } Autor: H.Sporenberg

Das <canvas>-Element – Die olympischen Ringe Autor: H.Sporenberg

Das <canvas>-Element – Smiley function draw () { canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); context.lineWidth = 2; context.beginPath(); context.fillStyle = 'yellow'; context.scale(2,2); context.arc(100,100,50,0,Math.PI*2,true); // Äußerer Kreis context.stroke(); context.fill(); context.arc(100,100,35,0,3.14,false); // Mund context.stroke(); context.beginPath(); context.fillStyle = 'black'; context.arc(80,80,5,0,Math.PI*2,true); // Linkes Auge context.fill(); context.arc(115,80,5,0,Math.PI*2,true); // Rechtes Auge } Autor: H.Sporenberg

Das <canvas>-Element – Smiley Autor: H.Sporenberg

Das <canvas>-Element – Verkehrsschild Ein Verkehrsschild soll gezeichnet werden. Es besteht aus einem Dreieck, um das ein schwarzer Rand gezeichnet wird. Das Zeichen auf dem Schild soll ein Ausrufzeichen sein. Darunter soll eine Stange das Schild tragen. Autor: H.Sporenberg

Das <canvas>-Element – Verkehrsschild <script> function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(200,38); // Obere Ecke context.lineTo(350,300); // Rechte Ecke unten context.lineTo(50,300); // Linke Ecke unten context.lineTo(200,38); context.strokeStyle="#ff0000"; context.lineWidth="16"; context.lineJoin="round"; context.fillStyle="#ffff00"; context.fill(); context.stroke(); context.fillStyle="#787878"; context.fillRect(185,308,30,300); // Hier wird das Ausrufezeichen eingefügt context.beginPath(); context.font="120pt Verdana"; context.fillStyle="#343434"; context.fillText("!",170,250); context.closePath(); } </script> Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element Um einen Text auf der Zeichenfläche darzustellen, gibt es 2 Möglichkeiten: context.fillText(text, xko, yko, maxwidth) context.strokeText(text,xko,yko,maxwidth) Beispiel: function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var xko=20; (5) var yko=80; if(canvas.getContext){ context.font = "36pt Helvetica"; context.fillStyle = "red"; context.lineWidth=4; (10) context.strokeStyle="#4488aa"; (11) context.fillText("Reflection", xko, yko,400); (12) context.font = "58pt Verdana"; (13) context.strokeText("Reflection", xko,2* yko); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element In Zeile (7) und (8) werden Schriftart und Schriftfarbe festgelegt, in Zeile (9) die Dicke der Linienbreite, in (10) die Farbe der Linie. In (11) wird der Text Reflection an der Stelle (20/80) mit der maximalen Breite von 400px gezeichnet. Diese Angabe ist aber nicht erforderlich. Dann wird in (12) die Schriftart verändert, in (13) wird der Text Reflection mit einer Umrandung der Buchstaben gezeichnet. Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.lineWidth=1; context.fillStyle="#CC00FF"; context.lineStyle="#ffff00"; context.font="26px sans-serif"; context.fillText("Fill Text, 26px, sans-serif", 20, 20); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.lineWidth=1; context.font="30px verdana"; context.strokeText("Stroke Text, 22px, veranda", 20, 50); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.lineWidth=1; context.font="italic 26px Times"; context.strokeText("Italic, Stroke, Text, 26px, times", 20, 85); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.lineWidth=3; context.strokeStyle="rgba(35, 70, 237, .6)"; context.font="38pt sans-serif"; context.fillText("Fill, Stroke Text, 28pt, sans-serif", 20, 130); context.strokeText("Fill, Stroke Text, 28pt, sans-serif", 20, 130); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.lineWidth=1; context.fillStyle="#0000ff"; context.strokeStyle="#880000"; context.font="bold 35pt sans-serif"; context.shadowOffsetX=4; context.shadowOffsetY=-4; context.shadowColor="#888888"; context.fillText("Shadow, Bold Text, 35pt, sans-serif", 20, 180); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.fillStyle="#ff0000"; context.lineStyle="#121212"; context.font="bold 35pt sans-serif"; context.shadowOffsetX=8; context.shadowOffsetY=8; context.shadowBlur=8; context.fillText("Shadow, Blur, Stroke, Bold Text, 28pt", 20, 220); context.strokeText("Shadow, Blur, Stroke, Bold Text, 28pt", 20, 220); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ var gradient=context.createLinearGradient(5, 50, 500, 20); gradient.addColorStop(0.1, '#F82E23'); gradient.addColorStop(0.25, '#E2E651'); gradient.addColorStop(0.5, '#55D268'); gradient.addColorStop(0.75, '#5A77DA'); gradient.addColorStop(1, '#C84489'); context.fillStyle=gradient; context.font="bold 36pt sans-serif"; context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=10; context.fillText("Gradient Fill Text", 20, 160); context.fillStyle='#000000'; context.strokeStyle=gradient; context.lineWidth=3; context.strokeText("Gradient Stroke Text", 20, 350); context.strokeText("Shadow, Blur, Stroke, Bold Text, 28pt", 20, 220); }} Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.font="bold 36pt sans-serif"; context.shadowColor="rgb(190,190,190)"; context.shadowOffsetX=10; context.shadowOffsetY=10; context.fillStyle="rgb(255,0,0)"; context.fillText("ASGSG Marl", 20, 140); }} Die Farbe des Schattens ist ein Grauton (190,190,190); die beiden Befehle shadowOffsetX und shadowOffsetY erzeugen einen Schatten in der entsprechenden Pixelgröße in x- und y-Richtung Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ context.font="bold 36pt sans-serif"; context.shadowColor="rgb(190,190,190)"; context.shadowOffsetX=10; context.shadowOffsetY=10; context.shadowBlur=10; context.fillStyle="rgb(255,0,0)"; context.fillText("ASGSG Marl", 20, 140); }} Die Schatten sind sehr hart, d.h. sehr exakt abgegrenzt. Dies kann man mit Hilfe von shadowBlur steuern, je größer der Wert desto stärker zerfließt der Schatten Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){ var gradient=context.createLinearGradient(0,0,300,200); gradient.addColorStop(0,“rgb(255,0,0)“); // von Rot gradient.addColorStop(1,“rgb(255,255,0)“); // bis Gelb context.font="bold 36pt sans-serif"; context.shadowColor="rgb(190,190,190)"; context.shadowOffsetX=10; context.shadowOffsetY=10; context.shadowBlur=10; context.fillStyle="rgb(255,0,0)"; context.fillText("ASGSG Marl", 20, 140); }} Der fillStyle kann auch als Gradient definiert werden. Dies geschieht mit gradient.addColorStop. Damit kann der Bereich der Farben eingestellt werden. Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element Textanimation von links nach rechts function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); animate(context,0,100); } function animate(context,xko,yko){ setTimeout(function(){ context.clearRect(0,0,500,300); context.beginPath(); context.fillStyle = "blue"; context.font = "48pt Helvetica"; context.fillText("Reflection", xko, yko); xko=xko+2;yko=100; if(xko>500){xko=0}; self.animate(context,xko,yko);},8); Autor: H.Sporenberg

Darstellung von Text im <canvas>-Element Textanimation von rechts nach links function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); animate(context,500,100); } function animate(context,xko,yko){ setTimeout(function(){ context.clearRect(0,0,500,300); context.beginPath(); context.fillStyle = "blue"; context.font = "48pt Helvetica"; context.fillText("Reflection", xko, yko); xko=xko-2; yko=100; if(xko<0){xko=500}; self.animate(context,xko,yko);},10); Die Änderungen sind fett dargestellt. Achtung: Die Geschwindigkeiten gegenüber links nach rechts sind nicht gleich. Darum: die Zeit bis zum nächsten rekursiven Aufruf muss erhöht werden. Autor: H.Sporenberg

Das Einbinden von Videos Der <video>-Tag ist eine Neuerung von HTML5 und dient dazu, Filme und Videos abzuspielen. Videos können direkt in eine HTML-Seite eingebettet werden. Selbstverständlich können die Videos deshalb auch mit CSS und JavaScript kombiniert werden. Keine Plugins – aber unterschiedliche Codecs Zum Abspielen sind keine Browser-Plugin wie z.B. Silverlight oder Flash nötig. Voraussetzung für den <video>-Tag ist lediglich ein aktueller Browser wie Firefox (ab 3.5) oder Safari (ab 4). Leider wurde bisher kein gemeinsamer Nenner von den Browserherstellern gefunden, welche Video-Codecs eingesetzt werden dürfen/müssen. Die möglichen Codecs hängen deshalb vom Browser ab. Firefox setzt auf Theora – Safari kann MPEG-4 Firefox kann Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Safari setzt auf das MPEG4-Format mit dem bekannten und effizienten Codec-Duo H.264 (Video) und AAC (Audio). Bessere Qualität, aber MPEG-4-Lizenzgebühren. Autor: H.Sporenberg

Das Einbinden von Videos Um Videos einzubinden, müssen die Videos im MPEG4- bzw. OGV-Format vorliegen. Meistens jedoch liegen die Videos im MPEG4-Format vor. Um diese Videos in das OGV-Format umzuwandeln, eignet sich der Theora-Encoder Version: Größe: 2,1 MB <body> <center> <video autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5 </video> </body> Autor: H.Sporenberg

Das Einbinden von Videos Attribute: Mit Hilfe von width und height kann die Größe des Videos eingestellt werden. autoplay legt fest, ob das Video automatisch gestartet werden soll oder nicht. Mit poster kann man ein Bild hinterlegen poster = „bild.jpg“. Dies wird angezeigt, solange das Video noch nicht geladen wird. Ein Bild einzufügen macht natürlich nur Sinn, wenn das Attribut autoplay nicht aktiviert wurde. controls="controls" aktiviert eine Leiste mit Steuerungsfunktionen für den Benutzer <body> <center> <video width=600 height= 400 autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5 </video> </body> Autor: H.Sporenberg

Das Einbinden von Videos <body> <center> <video width=600 height= 400 autoplay controls=„controls“> <source src="Udo_Lindenberg.mp4" type="video/mp4" /> <source src="Udo_Lindenberg.ogv" type="video/ogg" /> This browser is not compatible with HTML 5 </video></center> </body> Autor: H.Sporenberg

Das <canvas>-Element – Bezier-Kurve function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); context.lineWidth = 20; context.beginPath(); context.moveTo(5, 50); context.bezierCurveTo(30, 30, 130, 530, 200, 100); context.stroke();} Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Die Methode createLinearGradient dient zur Erzeugung eines linearen Gradienten. Die Übergabeparameter definieren die Startposition (x0,x0) und Endposition (x1,y1). Zurückgegeben wird ein Objekt vom Typ CanvasGradient, das mit der Methode addColorStop die Möglichkeit bietet, im Verlauf Farbpunkte zu setzen, die als Teilziele dienen und durchlaufen werden müssen. createLinearGradient(x0,y0,x1,y1) Die Parameter: x0-Horizontale Koordinate des Startpunkts y0-Vertikale Koordinate des Startpunktes x1- Horizontale Koordinate des Endpunkts y1-Vertikale Koordinate des Endpunkts Die Abbildung zeigt einen Farbverlauf von gelb über rot nach blau. Die Verlaufspunkte (vp1, vp2 und vp3) teilen die Verlaufsstrecke gleichmäßig. Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient createLinearGradient(x0,y0,x1,y1) Die Parameter: x0-Horizontale Koordinate des Startpunkts y0-Vertikale Koordinate des Startpunktes x1- Horizontale Koordinate des Endpunkts y1-Vertikale Koordinate des Endpunkts Wenn x0=x1, dann wird der Gradient von oben nach unten gezeichnet. Wenn y0=y1, dann wird der Gradient im Verlauf von links nach rechts gezeichnet. Die Abbildung zeigt einen Farbverlauf von gelb über rot nach blau. Die Verlaufspunkte (vp1, vp2 und vp3) teilen die Verlaufsstrecke gleichmäßig. Man kann dem Gradienten mit addColorstep Farbverlaufspunkte zuweisen. Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient createLinearGradient(x0,y0,x1,y1) Um bei einem linearen Farbverlauf einen diagonalen Effekt zu erzielen, müssen y- und x-Werte unterschiedlich sein. var objGradient=context.createLinearGradient(0, 0, 280, 100); //Farbpunkte festlegen objGradient.addColorStop(0, '#f00');//von Anfang rot objGradient.addColorStop(0.5, '#0f0');//50% gruen objGradient.addColorStop(1.0, '#00f');//100% blau context.fillStyle=objGradient; context.fillRect(0,0,280,100); context.fillRect(290,0,280,100); context.fillRect(0,110,220,100); Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient <script> function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var objGradient = context.createLinearGradient(0, 0, 480, 0); // Verlaufspunkte setzen (gelb->rot->blau->gruen) objGradient.addColorStop(0, '#ff0'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.7, '#0000ff'); objGradient.addColorStop(0.7, '#00f'); objGradient.addColorStop(1, 'rgba(0,255,0,0.5)'); Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient // Füll-Style mit Gradient auszeichnen context.fillStyle = objGradient; // Rechteck zeichnen context.fillRect(10, 10, 480, 120); // Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#898989"; context.strokeRect(10, 10, 480, 120); } </script> Es wird ein vertikaler Farbverlauf von gelb über rot nach grün (halbtransparent) erstellt. Zunächst wird mit der Methode createLinearGradient ein CanvasGradient-Element erstellt. Mit Hilfe der addColorStop-Methode werden die benötigten Verlaufspunkte gesetzt. Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient <script> function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var grad = context.createLinearGradient(10, 0, 390, 0); grad.addColorStop(0, 'red'); grad.addColorStop(1 / 6, 'orange'); grad.addColorStop(2 / 6, 'yellow'); grad.addColorStop(3 / 6, 'green') grad.addColorStop(4 / 6, 'aqua'); grad.addColorStop(5 / 6, 'blue'); grad.addColorStop(1, 'purple'); context.fillStyle = grad; context.fillRect(0, 0, 400, 175); Regenbogen // Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#898989"; context.strokeRect(0, 0, 400, 175); } </script> Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Regenbogen Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient <script> function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Draw a path var grad = context.createLinearGradient(10, 0, 300, 0); grad.addColorStop(0, 'black'); grad.addColorStop(1, 'white'); context.fillStyle = grad; context.fillRect(10, 10, 300, 100); // Rahmen um das Rechteck context.lineWidth = "8"; context.strokeStyle = "#000089"; context.strokeRect(10, 10, 300, 100); } </script> Grauabstufung Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient function drawGradient(){ var objCanvas = document.getElementById('canvas1'); if(objCanvas.getContext){ var objContext = objCanvas.getContext('2d'); // Linearen Verlauf erstellen var objGradient = objContext.createLinearGradient(0, 0, 280, 0); // Verlaufspunkte setzen (gelb;rot;blau;gruen) objGradient.addColorStop(0, '#ff0'); objGradient.addColorStop(0.3, '#f00'); objGradient.addColorStop(0.7, '#0000ff'); objGradient.addColorStop(0.7, '#00f'); objGradient.addColorStop(1, 'rgba(0,255,0,0.5)'); // Füll-Style mit Gradient auszeichnen objContext.fillStyle = objGradient; // Rechteck zeichnen objContext.fillRect(10, 10, 500, 180); } Und so sieht es aus Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient <script> var canvas, context, angle = 0; function init() { canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); var t = setInterval(animate,30); } function animate() { // create a variable that cycles from -1 to 1 angle += 0.03; var scalar = Math.sin(angle); // create gradient that goes from bottom to top of canvas var grad = context.createLinearGradient(0, canvas.height, 0, 0); // start gradient at blue grad.addColorStop(0, 'blue'); Dieses Beispiel erzeugt eine Endlosschleife, bei der der Gradient verändert wird. Grundfarbe ist blau. Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient // create rgb color value that goes from black to white // as the variable goes from -1 to 1 var r = parseInt( * scalar); var g = parseInt( * scalar); var b = parseInt( * scalar); // add color stop with new rgb color grad.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")"); // clear canvas, fill canvas with gradient context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.fillStyle = grad; context.fillRect(0, 0, canvas.width, canvas.height); context.restore(); } </script> Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Bei diesem Beispiel wird das Wort nach unten gespiegelt, verzerrt und die einzelnen Buchstaben werden mit einer gradienten Farbe versehen. function drawCanvas(){ var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); context.fillStyle="blue"; context.font="52pt Helvetica"; context.fillText("Reflection", 0,100); context.setTransform(1,0,0,-1,0,0); context.scale(1,2); // Der gespiegelte Text wird um den Faktor 2 gestreckt var grad = context.createLinearGradient(0,0, 500,0); grad.addColorStop(0, 'blue'); grad.addColorStop(1, 'rgba(255,255,255,0)'); context.fillStyle = grad; context.fillText("Reflection", 0,-100/2); } Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Autor: H.Sporenberg

Das <canvas>-Element – Farbverlauf mit Gradient Die Methode createRadialGradient dient zum Erstellen eines radialen Gradienten. Die sechs Parameter definieren dabei Start- (x0,y0) mit dem Radius radius0 und dem Endmittelpunkt (x1,y1) mit dem Radius radius1. createRadialGradient(x0,y0,radius0,x1,y1,radius1) x0-Horizontale Koordinate des Mittelpunkts des ersten Kreises y0-Vertikale Koordinate des Mittelpunkts des ersten Kreises radius0-Radius des ersten Kreises x1-Horizontale Koordinate des Mittelpunkts des zweiten Kreises y1- Vertikale Koordinate des Mittelpunkts des zweiten Kreises radius1-Radius des zweiten Kreises Autor: H.Sporenberg

Das <canvas>-Element – Animation Der Aufbau einer Animation sieht wie folgt aus: Ein Bild mit dem sich bewegenden Objekt wird erzeugt, dann wird dieses Objekt gelöscht. Anschließend wird das Objekt an einer anderen Stelle wieder neu gezeichnet. Dieser Vorgang wiederholt sich dann. Als Beispiel nehmen wir ein Rechteck, dass sich von links nach rechts bewegen soll. Ist dieses Rechteck am rechten Bildrand angekommen, beginnt die Bewegung erneut von links nach rechts. Autor: H.Sporenberg

Das <canvas>-Element – Animation <script> function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 50);} } function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {ax=10}; //Rechteck kommt wieder von links self.animate(context, ax, ay);}, 8); // Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der //Funktion vergeht (in Millisekunden) </script> Autor: H.Sporenberg

Das <canvas>-Element – Animation Die Animation soll enden, wenn das Rechteck am rechten Rand angekommen ist. <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 50);} } function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {return}; //Die Animation stoppt self.animate(context, ax, ay);}, 8); // Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden) </script> Autor: H.Sporenberg

Das <canvas>-Element – Animation Das sich bewegende Rechteck soll einen Rand bekommen <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 50);} } function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black"; context.strokeRect(ax, ay, 100,50); ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {return}; //Die Animation stoppt self.animate(context, ax, ay);}, 8); // Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden) </script> Autor: H.Sporenberg

Das <canvas>-Element – Animation Die Bewegung wiederholt sich, sobald das Rechteck am rechten Rand angekommen ist. <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 50);} } function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black"; context.strokeRect(ax, ay, 100,50); ax=ax+1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax>300) {ax=0}; //Die Animation beginnt wieder von links self.animate(context, ax, ay);}, 8); // Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden) </script> Autor: H.Sporenberg

Das <canvas>-Element – Animation <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 400, 50);} } function animate(context, ax,ay){ setTimeout(function(){ // Neues Bild context.clearRect(0, 0, 400, 400); //Canvas wird gelöscht context.beginPath(); context.fillStyle = "#ff00ff"; context.fillRect(ax,ay,100,50); //Rechteck neu zeichnen context.lineWidth = "4"; context.strokeStyle = "black"; context.strokeRect(ax, ay, 100,50); ax=ax-1; ay=50; //x-Koordinate um 1 erhöht, y bleibt if (ax<0) {ax=400}; //Die Animation stoppt self.animate(context, ax, ay);}, 8); // Die Zahl 8 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden) </script> Das Rechteck bewegt sich von rechts nach links und beginnt dann wieder von rechts. Autor: H.Sporenberg

Das <canvas>-Element – Animation Jetzt soll die Bewegung des Rechtecks von links nach rechts beginnen. Sobald der rechte Rand erreicht wird, soll die Bewegung sich umkehren und dann wieder nach links beginnen. Am linken Rand kehrt die Bewegung sich dann wieder um. Man benötigt dafür zwei Abfragen. Einmal ob der rechte Rand erreicht wurde, dann ob der linke Rand erreicht wurde. In Abhängigkeit davon, muss die x-Koordinate erhöht bzw. erniedrigt werden. Das erreicht man dadurch, dass man den zu addierenden Wert als Variable nimmt. In der If-Abfrage wird der Wert dieser Variablen verändert. Autor: H.Sporenberg

Das <canvas>-Element – Animation – Rechteck bewegt sich von links nach rechts und wieder zurück function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 50,1); } } function animate(context, ax,ay,dx){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0, 0, 800, 400); context.fillStyle = "rgba(0, 0, 255, 0.5)"; context.fillRect(ax, ay, 100,50); context.lineWidth = 4; context.strokeStyle = „#000000"; context.strokeRect(ax, ay, 100,50); ax=ax+dx; ay=50; if (ax<0){dx=4}; if (ax> ){dx=-4}; self.animate(context, ax, ay,dx); }, 4); } Autor: H.Sporenberg

Das <canvas>-Element – Animation – Rechteck wächst nach rechts function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 10, 10); } } function animate(context, hx,hy){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0, 0, 800, 400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,10,hx, hy); context.lineWidth = 2; context.strokeStyle = "black"; context.strokeRect(50,10,hx, hy); hx=hx+2; hy=10; if (hx> ){return}; self.animate(context, hx, hy); }, 4);} Autor: H.Sporenberg

Das <canvas>-Element – Animation – Rechteck wächst von unten nach oben function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 200); } } function animate(context, ay,Hoehey){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Hoehey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Hoehey); ay=ay-2; Hoehey=Hoehey+2; if(ay<100){return}; self.animate(context, ay, Hoehey); }, 4);} Autor: H.Sporenberg

Das <canvas>-Element – Animation Jetzt können etliche Aufgaben gestellt werden, die die lineare Bewegung als Grundlage haben. 1.Bewegung eines Kreises von links nach rechts 2.Bewegung von Kreis/Rechteck von rechts nach links 3.Bewegung von Kreis/Rechteck von oben nach unten bzw. von unten nach oben. 4.Bewegung von Kreis/Rechteck auf der Diagonalen der Leinwand. Autor: H.Sporenberg

Bewegung eines Kreises von links nach rechts Im Prinzip muss man das Programm für die Bewegung eines Rechtecks von links nach rechts nur leicht modifizieren. Der Kreis soll die Bewegung wiederholen, sobald er den rechten Rand erreicht hat. <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 50, 50); } Autor: H.Sporenberg

Bewegung eines Kreises von links nach rechts function animate(context, ax,ay){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.beginPath(); context.fillStyle = "#EEE8AA"; context.lineWidth = 10; context.strokeStyle ="#DAA520"; context.arc(ax,ay, 30, 0, 2 * Math.PI, true); context.stroke(); context.fill(); ax=ax+1; ay=50; if (ax>290) {ax=50}; self.animate(context, ax, ay);}, 4); // Die Zahl 4 gibt die Zeit an, die bis zum //nächsten Aufruf der Funktion vergeht //(in Millisekunden) } </script> <body onload="drawCanvas()"> <canvas id="testcanvas1" width="400" height="400"> Ihre Browser ist nicht HTML5 tauglich. </canvas> </body> Autor: H.Sporenberg

Bewegung eines Kreises von links nach rechts Soll die Bewegung nur einmal ausge-führt werden, so muss die If-Anwei-sung geändert werden ……. ax=ax+1; ay=50; if (ax>290) {exit()}; self.animate(context, ax, ay);}, 4); // Die Zahl 4 gibt die Zeit an, die bis zum //nächsten Aufruf der Funktion vergeht //(in Millisekunden) } </script> Autor: H.Sporenberg

Reflexion zweier Quadrate an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 31, 69, 1, -1, 8, 25, 1, 1); } Die Funktion animate erwartet 9 Übergabeparameter animate(context, ax, ay, adx, ady, bx, by, bdx, bdy) Die Parameter beginnend mit a gelten für das rote Quadrat, beginnend mit b für das grüne Quadrat. ax, ay bzw. bx, by geben den Anfangspunkt (oben links) des jeweiligen Quadrats an. Die Variablen adx, ady bzw. bdx, bdy geben die Richtung der Bewegung zu Beginn an (450 gegenüber den Wänden). Autor: H.Sporenberg

Reflexion zweier Quadrate an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) function animate(context, ax, ay, adx, ady, bx, by, bdx, bdy){ setTimeout(function(){ //Bewegen und Abprallen für Quadrat A if(ax == 325){adx = -1;} else{ if(ax == 0){adx = 1;} } if(ay == 325){ady = -1;} if(ay == 0){ady = 1;} ax = ax+adx; ay = ay+ady; //Bewegen und Abprallen für Quadrat B if(bx == 350){bdx = -1;} else{ if(bx == 0){bdx = 1;} } if(by == 350){bdy = -1;} if(by == 0){bdy = 1;} bx = bx+bdx; by = by+bdy; Autor: H.Sporenberg

Reflexion zweier Quadrate an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) // Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.fillStyle = "rgba(255, 0, 0, 0.7)"; context.fillRect(ax, ay, 75, 75); context.fillStyle = "rgba(0, 255, 0, 0.8)"; context.fillRect(bx, by, 50, 50); self.animate(context, ax, ay, adx, ady, bx, by, bdx, bdy);}, 10); // Die Zahl 10 gibt die Zeit an, die bis zum nächsten Aufruf der //Funktion vergeht (in Millisekunden) </script> <body onload="drawCanvas()"> <canvas id="testcanvas1" width="400" height="400"> Ihre Browser ist nicht HTML5 tauglich. </canvas> </body> Autor: H.Sporenberg

Reflexion eines Kreises (Ball) an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) Wir benutzen den Code für die Reflexion zweier Quadrate und modifizieren diesen. Änderungen Der Aufruf erfordert nur noch 5 Variable. Dabei bestimmen ax und ay den Mittelpunkt des Kreises, der Radius ist fest vorgegeben (hier 30 Pixel). Die Variablen adx und ady bestimmen die erste Richtung des Kreises. animate(context, 8, 25, 1, 1) function animate(context, ax, ay, adx, ady) Autor: H.Sporenberg

Reflexion eines Kreises (Ball) an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) function animate(context, ax, ay, adx, ady){ setTimeout(function(){ //Bewegen und Abprallen für den Kreis if(ax == 250){ adx = -1;} else{ if(ax == 30){adx = 1;} } if(ay == 250){ady = -1; } if(ay == 30){ady = 1;} ax = ax+adx; ay = ay+ady; Autor: H.Sporenberg

Reflexion eines Kreises (Ball) an den Rändern des Canvas-Rahmen (450 – Winkel gegenüber den Wänden) // Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.beginPath(); context.fillStyle = "rgba(0, 255, 0, 0.5)"; context.lineWidth=8; context.strokeStyle="#ff00ff"; context.arc(ax, ay, 30,0,2*Math.PI,true); context.stroke(); context.fill(); self.animate(context, ax, ay, adx, ady);}, 2); // Die Zahl 10 gibt die Zeit an, die bis zum nächsten //Aufruf der Funktion vergeht (in Millisekunden) } <body onload="drawCanvas()"> <canvas id="testcanvas1" width="280" height="280"> Ihre Browser ist nicht HTML5 tauglich. </canvas> </body> Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Die Bundestagswahlenaufgabe wird nun modifiziert. Die Balken für die Ergebnisse der einzelnen Parteien sollen jetzt dynamisch bis zum Endwert wachsen. Sobald alle Balken fertiggestellt sind, soll die Grafik sich nicht mehr verändern. Die Balken sollen von unten nach oben wachsen. Die Überlegung ist, dass das Rechteck auf der gemeinsamen Linie für alle Parteien nach oben wächst. Da der Koordinatenursprung in der linken oberen Ecke der canvas ist und für das Rechteck die Koordinaten der linken oberen Ecke sowie Höhe und Breite angegeben werden müssen, erfordert dies eine Umrechnung. Diese sieht folgendermaßen aus: context.fillRect(ax, 200-ay, 50, ay); Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen context.fillRect(ax, 200-ay, 50, ay) Dabei ist ax die x-Koordinate des linken oberen Punktes des Rechtecks. Diese ändert sich für eine Partei natürlich nicht. Im Gegensatz dazu muss sich die y-Koordinate mit jedem Aufruf verändern. Alle Rechtecke beginnen bei y=200 (kann natürlich auch jeder andere Wert sein. Nur: dieser muss für alle Parteien gleich sein.). Da die Rechtecke nach oben wachsen, muss sich die y-Koordinate verkleinern, im gleichen Maße muss aber die Länge des Rechtecks sich vergrößern. Dies geschieht über die Variable ay. Beispiel: wir nehmen ay=10 und ax=50 (der Wert für ax bleibt für die SPD konstant). Dann hat das erste Rechteck beim ersten Mal folgenden Aufruf: context.fillRect(50,190,50,10) Wird jetzt wie im Beispiel ay um 1 Pixel erhöht, so sieht der zweite Aufruf wie folgt aus: context.fillRect(50,189,50,11) Wenn das Rechteck schneller wachsen soll, muss die Variable ay um mehrere Pixel erhöht werden (ausprobieren!!) Mit 1 Pixel ist die Animation der Balken eigentlich o.k. Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Die Säule für die SPD wird animiert function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 50, 10); } function animate(context, ax,ay){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0, 0, 400, 400); context.fillStyle = "rgba(255, 0, 0, 1)"; context.fillRect(ax, 200-ay, 50, ay); context.font = "12pt Verdana";//Schriftart context.fillStyle = "#222222"; // Textfarbe context.fillText("SPD", 55, 230); Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen // Hier wird die Grundlinie gezeichnet context.lineWidth=8; context.strokeStyle = "#0000ff"; context.moveTo( 20, 210 ); context.lineTo(450, 210 ); context.stroke(); ay=ay+1; // Die nächste y-Koordinate wird um 1 vermindert ax=50; // Die Breite des Rechtecks bleibt konstant 50 Pixel if (ay>50){ay=50}; // Wenn die Höhe der Säule erreicht ist, ändert sich //das Rechteck nicht mehr, ay bleibt dann konstant self.animate(context, ax, ay,bx,by);}, 0); // Selbstaufruf } Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Und so sieht es aus. Die Säule für die SPD bleibt bei der entsprechenden Höhe für die erreichte Prozentzahl stehen (muss umgerechnet werden auf die maximal vorgesehene Höhe). Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Wird jetzt die Säule für die nächste Partei hinzugefügt, so müssen nur wenige Änderungen durchgeführt werden. 1. Die Anzahl der Übergabeparameter ändert sich (+2), nämlich bx und by kommen hinzu. Dabei legt bx die x-Komponente der nächsten Säule fest, by ist ein Maß für die Höhe der Säule. 2. Die Beschriftung, Parteiname, Prozente und Farbe der Säule, muss geändert werden. 3. Die Abfrage muss entsprechend der Höhe der Säule modifiziert werden. Dieses gilt nur für die Partei mit der höchsten Prozentzahl und damit mit der höchsten Säule. Ist diese gezeichnet, muss die Animation gestoppt werden. Dies geschieht mit der folgenden Abfrage (in unserem Fall gehört die höchste Säule zur CDU) if (by>100){exit()}; Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Der folgende Code muss eingefügt werden. context.fillStyle = "rgba(20, 20, 20, 0.5)“; context.fillRect(bx, 200-by, 50, by+1); context.font = "12pt Verdana";//Schriftart context.fillStyle = "#222222"; // Textfarbe context.fillText("CDU", 145, 230); context.fillText("32,8%", 145, 80); Und hier die Abfrage für die stärkste Partei (hier CDU) by=by+1; bx=140; if (by>100){exit()}; Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Der Aufruf muss natürlich auch geändert werden function drawCanvas(){ var function animate(context, ax,ay,bx,by){ setTimeout(function(){… canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 50, 10,140,10); } } ……. ……. if (by>100){exit()}; self.animate(context, ax, ay,bx,by); }, 0); // Die Zahl 10 gibt die Zeit an, die bis zum nächsten Aufruf der Funktion //vergeht (in Millisekunden) } Autor: H.Sporenberg

Animiertes Balkendiagramm - Bundestagswahlen Die fertige Grafik Autor: H.Sporenberg

Verschiedene Farbangaben Farben kann man unterschiedlich angeben. 1.Angabe des Farbnamens 2. HexadezimalAngabe 3. Dezimalangabe im rgb-Modus 4. Dezimalangabe im rgba-Modus. Die vierte Zahl liegt zwischen 0 und 1 und ist ein Maß für die Durchsichtigkeit (1 undurchsichtig, 0 vollkommen durchsichtig) 1. ctx.fillStyle = "orange"; 2. ctx.fillStyle = "#FFA500"; 3. ctx.fillStyle = "rgb(255,165,0)"; 4. ctx.fillStyle = "rgba(255,165,0,1)"; Autor: H.Sporenberg

Die for-Schleife Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisun-gen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 1 ini-tialisiert. Die zweite Anweisung enthält die Bedingung für den Schleifenab-lauf; die Schleife wird ausgeführt, wenn und solange diese zutrifft. Dazu braucht man Vergleichsoperatoren. In der dritten Anweisung wird der Schlei-fenzähler so verändert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird der Zähler mit i=i+1 bei jedem Schleifendurchgang um 1 erhöht. xko=10; for( i=1;i<10;i=i+1){ context.fillText(i, xko, 100); context.fillText(i*i, xko, 150); xko=xko+50; } Autor: H.Sporenberg

Funktionsplotter Hier soll ein einfacher Funktionsplotter mit Hilfe von canvas entwickelt werden. Dabei sollen beliebige quadratische Funktionen der Form f(x) = a x2 + b x +c nach Eingabe der Werte für a, b und c gezeichnet werden. Das Koordinatenkreuz hat feste Werte für xmin, xmax, ymin und ymax. Diese sind: xmin = -5, xmax = 5, ymin = -5, ymax = 5. Die Canvas hat die Größe width=600 und height=600. Der Koordinatenursprung liegt in der Mitte der canvas. Also: x = 300 und y = 300. Dieses Grundprogramm kann an vielen Stellen erweitert werden. Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz - Koordinatenachsen <script> function drawCanvas(){ var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); Koordinatenkreuz(context ); } function Koordinatenkreuz(context) context.lineWidth=5; context.strokeStyle = "#0000ff"; context.moveTo( 10,300 ); context.lineTo(590,300 ); context.stroke(); context.moveTo( 300,10 ); context.lineTo(300,590 ); exit(); } </script> Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz - Gitterlinien Jetzt soll ein Gitter erzeugt werden. Die Linien sollen natürlich dünner als die Koordinatenachsen sein und auch eine andere Farbe haben. Diese Gitterlinien können jetzt einzeln sukzessive in x-Richtung und y-Richtung erzeugt werden. Der Quellcode dafür ist unten angegeben. //Code für die senkrechten Gitterlinien context.strokeStyle = "#787878"; context.lineWidth=2; context.moveTo( 100,10 ); context.lineTo(100,590 ); context.moveTo( 150,10 ); context.lineTo(150,590 ); ..... //Code für die waagerechten Gitterlinien context.moveTo( 10,50 ); context.lineTo(590,50 ); context.moveTo( 10,100 ); context.lineTo(590,100 ); ..... Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz - Beschriftung Die Beschriftung der Achsen geschieht ebenfalls einzeln für jede Zahl sowohl in der senkrechten als auch in der waagerechten. //Code für die Zahlen an der x-Achse context.font = "12pt Verdana"; context.fillStyle = "#222222"; // text color context.fillText("-5", 40, 330); context.fillText("-4", 90, 330); ..... //Code für die Zahlen an der y-Achse context.fillText("5", 320, 55); context.fillText("4", 320, 105); .... Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz – die for-Schleife Die Programmierung der Gitterlinien und der Beschriftung kann mit Hilfe der for-Schleife stark vereinfacht werden. Für die Gitterlinien lautet der Code wie unten angegeben. //Code für senkrechten Gitterlinien for( xwert=50;xwert<600;xwert=xwert+50) { context.moveTo( xwert,10 ); context.lineTo(xwert,590 );} //Code für die waagerechten Gitterlinien for(ywert=50;ywert<600;ywert=ywert+50) { context.moveTo( 10,ywert ); context.lineTo(590,ywert ); } Man erkennt leicht, dass die Vereinfachung Sinn macht. Der Quelltext reduziert sich damit auf 3 Zeilen, egal wie viele Gitterlinien gezeichnet werden müssen. Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz – die for-Schleife Die for-Schleife lässt sich natürlich auch für die Beschriftung der Achsen einsetzen. //Code für die Beschriftung der x-Achse context.font = "12pt Verdana"; context.fillStyle = "#222222"; // text color context.beginPath(); zahl=-5; for( xko=50;xko<600;xko=xko+50){ context.fillText(zahl, xko, 330); zahl=zahl+1; } context.closePath(); Autor: H.Sporenberg

Funktionsplotter 1.Das Koordinatenkreuz – die for-Schleife //Code für die Beschriftung der y-Achse context.beginPath(); zahl=5; for( yko=55;yko<600;yko=yko+50){ context.fillText(zahl, 320,yko); zahl=zahl-1; } context.closePath(); Autor: H.Sporenberg

Funktionsplotter 2.Der Graph Das Problem bei der graphischen Darstellung ist, dass das Koordinatensystem des canvas nicht identisch ist mit dem vorgesehenen Koordinatensystem. Vielmehr sind die Koordinatenkreuze gegeneinander verschoben. Bezeichnet man die Koordinaten im canvas-System mit x und y und im dargestellten Koordinatensystem mit xstrich und ystrich, so ergeben sich folgende Umrechungen (die canvas hat dabei die Breite 600px und Höhe 600px): xstrich = x – 300 und ystrich = 300 –y bzw. x = x und y = ystrich Autor: H.Sporenberg

Funktionsplotter 2.Der Graph context.beginPath(); context.strokeStyle = "#9ACD32"; //Farbe des Graphen context.lineWidth=4; //Dicke des Graphen xstrich=-300; //Der erste Wert im dargestellten Koordinatensystem x=0; //Der erste Wert im canvas-Koordinatensystem xplus=20; //Hiermit kann man die Schrittweite der x-Werte in //der Einheit Pixel festlegen Autor: H.Sporenberg

Funktionsplotter 2.Der Graph //Mit Hilfe der for-Schleife wird der Graph gezeichnet for( i=1;i<40;i=i+1){ x=x+xplus; //Der x-Wert im canvas-System wird um die Schrittweite erhöht. xstrich=xstrich+xplus; //Der x-Wert im dargestellten System wird um dieselbe Schrittweite erhöht. ystrich=1/5*(xstrich/50*xstrich/50)-4/5*xstrich/50-6/5; // Der y-Wert der Funktion wird berechnet context.moveTo(x,300-ystrich*50); //Da im canvas-System y nach unten zunimmt, muss der berechnete y-Wert von 300 //abgezogen werden. Da 50 Pixel einer Einheit entsprechen, muss der berechnete y-//Wert noch mit dem Skalierungsfaktor (hier: 50) multipliziert werden y2strich=1/5*((xstrich+xplus)/50*(xstrich+xplus)/50)-4/5*(xstrich+xplus)/50-6/5; Autor: H.Sporenberg

Funktionsplotter 2.Der Graph y2strich=1/5*((xstrich+xplus)/50*(xstrich+xplus)/50)-4/5*(xstrich+xplus)/50-6/5; //Dadurch wird jetzt eine Linie gezogen von P1(x, ystrich) und P2 (x+50,y2strich). //Dieses wird solange wiederholt, bis der linke Rand erreicht ist. Dieses wird durch die //Variable i gesteuert. context.lineTo(x+xplus,300-y2strich*50); } context.stroke(); context.closePath(); Autor: H.Sporenberg

Funktionsplotter 2.Der Graph Autor: H.Sporenberg

Verbesserter Funktionsplotter Der Funktionenplotter soll jetzt so erweitert werden, dass die Parameter a, b und c (f(x) = a x2 + b x + c) eingegeben werden. Danach soll die Parabel mit diesen Parametern gezeichnet werden. Änderungen: Die Werte von a, b und c müssen über ein Formular eingegeben werden. <tr > <td><center><input type="integer" class="schrift2" name="WertA" value=""></center></td> <td><center><input type="integer" class="schrift2" name="WertB" value=""></center></td> <td><center><input type="integer" class="schrift2" name="WertC" value=""></center></td> </tr> Autor: H.Sporenberg

Verbesserter Funktionsplotter Änderungen: Damit man weiß, welche Koeffizienten eingegeben werden, wird in einer über den Eingabefeldern angeordneten Tabellenreihe die entsprechende Variable angegeben <tr div class="schrift11" bgcolor=#c7c78f> <td><center>a</center></td> <td><center>b</center></td> <td><center>c</center></td></div> </tr> <tr bgcolor=#CDBE70 div class="schrift12"> <td colspan=3><center> Parabelplotter für Parabeln der Form: f(x) = a x<sup>2</sup> + b x +c </center></td></div></tr> Autor: H.Sporenberg

Verbesserter Funktionsplotter Änderungen: Um die Funktion zu zeichnen, muss durch einen Button die JavaScript-Funktion aufgerufen werden. <tr ><td colspan=3><center> <input type="button" name="Knopf" value="Parabel_zeichnen" onClick="drawCanvas(Formular.WertA.value,Formular.WertB.value, Formular.WertC.value)"> </center></td> </tr> Autor: H.Sporenberg

Verbesserter Funktionsplotter Hier der Quelltext für die gesamte Eingabe in einer Tabelle <center><table cellspacing=5> <form name="Formular"> <tr bgcolor=#CDBE70 div class="schrift12"><td colspan=3><center> Parabelplotter für Parabeln der Form: f(x) = a x<sup>2</sup> + b x +c </td></div> </tr> <tr div class="schrift11" bgcolor=#c7c78f> <td><center>a</center></td> <td><center>b</center></td> <td><center>c</center></td></div> <tr bgcolor=#c7c78f> <td><center><input type="integer" class="schrift2" name="WertA" value=""></center></td> <td><center><input type="integer" class="schrift2" name="WertB" value=""></center></td> <td><center><input type="integer" class="schrift2" name="WertC" value=""></center></td> <tr bgcolor=#CDCD00><td colspan=3><center> <input type="button" name="Knopf" value="Parabel_zeichnen" class="schrift2" onClick="drawCanvas(Formular.WertA.value,Formular.WertB.value,Formular.WertC.value)"> </center></td> </form> </table></center> Autor: H.Sporenberg

Verbesserter Funktionsplotter function drawCanvas(a,b,c){ koeffA=a;koeffB=b;koeffC=c; var canvas = document.getElementById("testcanvas1"); if(canvas.getContext){ var context = canvas.getContext('2d'); zeichnen(context,koeffA,koeffB,koeffC); } Autor: H.Sporenberg

Verbesserter Funktionsplotter function zeichnen(context,awert,bwert,cwert){ context.clearRect(0, 0, 600, 600); ….. context.beginPath(); context.strokeStyle = "#9ACD32"; context.lineWidth=4; xstrich=-300; x=0; xplus=20; for( i=1;i<40;i++){ x=x+xplus; xstrich=xstrich+xplus; ystrich=awert*(xstrich/50*xstrich/50)-bwert*xstrich/50-cwert; context.moveTo(x,300-ystrich*50); y2strich=awert*((xstrich+xplus)/50*(xstrich+xplus)/50)-bwert*(xstrich+xplus)/50-cwert; context.lineTo(x+xplus,300-y2strich*50); } context.stroke(); context.closePath(); exit(); a b c Autor: H.Sporenberg

Verbesserter Funktionsplotter Autor: H.Sporenberg

Canvas mit dem InternetExplorer 8 Der InternetExplorer 8 unterstützt das canvas-Element nicht. Es gibt aber eine Möglichkeit, die canvas-Methoden auch im InternetExplorer 8 zu benutzen. Dazu muss eine Javascript-Datei (excanvas.js) geladen werden. Dies geschieht mit der Befehlszeile:  Diese fügt man sinnvollerweise in den head ein. Achtung: Einige <canvas>-Features wie radialGradient funktionieren nicht oder leicht anders als im Original. Autor: H.Sporenberg

Canvas mit dem InternetExplorer 8 Ein Beispiel <html><head> <title>ExplorerCanvas Example 1</title>  <script type="text/javascript"> function draw(){ var canvas = document.getElementById('test'); if(canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle = "rgb(255, 0, 255)"; context.fillRect(0, 0, 100, 100); }} </script> <style type="text/css"> canvas {border: 1px solid black;} </style> </head> <body onload="draw()"> <canvas id="test" width="400" height="300"></canvas> </body> </html> Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Aufgabe: Es sollen mehrere Windmühlen an verschiedenen Stellen auf dem Canvas-Feld gezeichnet werden. Dazu muss die JavaScript-Funktion als Übergabeparameter die x- und y-Position besitzen, zusätzlich gibt noch eine dritte Variable an (cv), auf welcher Leinwand gezeichnet werden soll. Damit sieht der Funktionsaufruf in JavaScript wie folgt aus: function windmuehle(cv, xpos,ypos){……..} Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Der linke untere Punkt gibt die Position der Windmühle an (xpos und ypos). Er ist xpos-Pixel vom linken Rand und ypos-Pixel vom oberen Rand entfernt. cv.moveTo( xpos, ypos); Der Eckpunkt rechts unten ist auf gleicher Höhe 20 Pixel vom linken unteren Punkt entfernt. cv.lineTo(xpos + 20, ypos); Der Punkt rechts oben liegt 100 Pixel höher, also näher am oberen Rand, die Entfernung zum oberen Rand ist demnach 100 Pixel kleiner: cv.lineTo(xpos + 20, ypos - 100); Der linke obere Punkt hat wieder dieselbe Entfernung zum linken Rand wie beim ersten Punkt: cv.lineTo(xpos , ypos - 100); cv.fill(); Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die Flügel beginnen alle in einem Punkt, der "oben in der Mitte des Gebäudes" liegt, 10 Pixel von links und 10 Pixel von oben. Also immer: cv.moveTo(xpos + 10, ypos - 90); Die Endpunkte der Flügel liegen jeweils 50 Pixel weiter rechts/links und unten/oben: cv.lineTo(xpos + 60, ypos - 140); cv.lineTo(xpos + 60, ypos - 40); cv.lineTo(xpos -40, ypos - 40); cv.lineTo(xpos -40, ypos - 140); Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Hier das gesamte Programm: <html> <head> <title>Canvas Bilder stempeln</title> <script type="text/javascript"> function windmuehle1 (cv, xpos, ypos){ cv.fillStyle = "rgb(0,0,200)"; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+20, ypos); cv.lineTo( xpos+20, ypos-100); cv.lineTo(xpos, ypos-100); cv.fill(); cv.strokeStyle= "rgb(0,200,0)"; cv.lineWidth=2; cv.moveTo( xpos+10, ypos-90); cv.lineTo( xpos+10+50, ypos-90+50); cv.lineTo( xpos+10+50, ypos-90-50); cv.lineTo( xpos+10-50, ypos-90+50); cv.moveTo( xpos+10, ypos-90); cv.lineTo( xpos+10-50, ypos-90-50); cv.stroke(); cv.lineWidth=1; } function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle1(bild2,50, 200); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="zeichne();"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas> </body> </html> Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Ein anderer Aufruf von zeichne() - 2 Windmühlen function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle1(bild2,50, 200); windmuehle1(bild2,200, 300); } } Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Als nächstes soll die Windmühlenfunktion erweitert werden. Zusätzlich soll die Größe, die Farbe des Mühlenkörpers und der Windmühlenflügel beim Aufruf individuell angegeben werden können. Damit lautet der Funktionskopf jetzt: function windmuehle2(cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe) {….} Autor: H.Sporenberg

Animation von sich drehenden Windmühlen <html> <head> <title>Canvas Bilder stempeln</title> <script type="text/javascript"> function windmuehle2 (cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe){ cv.save() cv.fillStyle = wandfarbe; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill(); cv.strokeStyle= fluegelfarbe; cv.lineWidth=2; cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+5*d, ypos-hoehe+d+5*d); cv.lineTo( xpos+d+5*d, ypos-hoehe+d-5*d); cv.lineTo( xpos+d-5*d, ypos-hoehe+d+5*d); cv.lineTo( xpos+d-5*d, ypos-hoehe+d-5*d); cv.stroke(); cv.restore() } Autor: H.Sporenberg

Animation von sich drehenden Windmühlen function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); windmuehle2(bild2,200, 220,110, "green","yellow"); windmuehle2(bild2,40, 120,70, "blue","red"); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="zeichne();"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas> </body> Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die eigentliche Animation Eine Animation besteht aus aufeinanderfolgenden Bildern. Um diese zu erzeugen, muss die Funktion zeichne() wiederholt aufgerufen werden, und zwar muss dazu die Lage der Windmühlenflügel jedes Mal verändert werden. Um dies zu erreichen wird im Funktionskopf eine zusätzliche Variable winkel eingefügt. Das wiederholte Aufrufen der Funktion geschieht mit folgendem Befehl im body-Tag: <body onload="setInterval('zeichne()',20);"> Mit Hilfe dieses Befehls wird die Funktion zeichne() alle 20-Millisekunden aufgerufen. Autor: H.Sporenberg

Bildschirm wird gelöscht
JavaScript - Einführung Animation von sich drehenden Windmühlen Die eigentliche Animation Die Funktion zeichne() Bildschirm wird gelöscht function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); bild2.fillStyle="white"; bild2.fillRect(0,0,canvas2.width, canvas2.height); winkel1 = winkel ; windmuehle2(bild2,50, 120,70,winkel1, "blue","red"); winkel2 = winkel ; windmuehle2(bild2,150, 120,70,winkel2, "orange","blue"); winkel3 = winkel ; windmuehle2(bild2,250, 120,70,winkel3, "black","red"); } } 1.Windmühle – der Winkel wird um 0.02 beim nächsten Aufruf erhöht 2.Windmühle – der Winkel wird um 0.04 beim nächsten Aufruf erhöht 3.Windmühle – der Winkel wird um 0.06 beim nächsten Aufruf erhöht Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die eigentliche Animation Die Funktion windmuehle2(….) function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){ cv.save(); cv.fillStyle = wandfarbe; //"rgb(0,0,200)"; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill(); cv.strokeStyle= fluegelfarbe; //"rgb(0,200,0)"; if (fluegelfarbe == "white") cv.lineWidth=4; else cv.lineWidth=2; dy = 7*d*Math.sin(winkel); dx = 7*d*Math.cos(winkel); cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dx, ypos-hoehe+d-dy); cv.lineTo( xpos+d-dy, ypos-hoehe+d-dx) ; cv.lineTo( xpos+d-dx, ypos-hoehe+d+dy); cv.lineTo( xpos+d+dy, ypos-hoehe+d+dx); cv.stroke(); cv.restore() } Punkt auf dem Kreis für das Flügelende Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die Animation – der komplette Programm-Code <html> <head> <title>Canvas Bilder stempeln</title> <script type="text/javascript"> var winkel1 =0; var winkel2 =0; var winkel3 =0; Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die Animation – der komplette Programm-Code function windmuehle2 (cv, xpos, ypos, hoehe, winkel, wandfarbe, fluegelfarbe){ cv.save(); cv.fillStyle = wandfarbe; //"rgb(0,0,200)"; var d = hoehe/10; cv.beginPath(); cv.moveTo( xpos, ypos); cv.lineTo( xpos+2*d, ypos); cv.lineTo( xpos+2*d, ypos-hoehe); cv.lineTo(xpos, ypos-hoehe); cv.fill(); cv.strokeStyle= fluegelfarbe; //"rgb(0,200,0)"; if (fluegelfarbe == "white") cv.lineWidth=4; else cv.lineWidth=2; dy = 7*d*Math.sin(winkel); dx = 7*d*Math.cos(winkel); cv.beginPath(); cv.moveTo( xpos+d, ypos-hoehe+d); cv.lineTo( xpos+d+dx, ypos-hoehe+d-dy); cv.lineTo( xpos+d-dy, ypos-hoehe+d-dx) ; cv.lineTo( xpos+d-dx, ypos-hoehe+d+dy); cv.lineTo( xpos+d+dy, ypos-hoehe+d+dx); cv.stroke(); cv.restore() } Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die Animation – der komplette Programm-Code function zeichne(){ var canvas2 = document.getElementById('Canvas2'); if (canvas2.getContext){ var bild2 = canvas2.getContext('2d'); bild2.fillStyle="white"; bild2.fillRect(0,0,canvas2.width, canvas2.height); winkel1 = winkel ; windmuehle2(bild2,50, 120,70,winkel1, "blue","red"); winkel2 = winkel ; windmuehle2(bild2,150, 120,70,winkel2, "orange","blue"); winkel3 = winkel ; windmuehle2(bild2,250, 120,70,winkel3, "black","red"); } } </script> Autor: H.Sporenberg

Animation von sich drehenden Windmühlen Die Animation – der komplette Programm-Code <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="setInterval('zeichne()',20);"> <canvas id="Canvas2" width="450" height="350"> Ihr Browser kann kein Canvas! </canvas> </body> </html> Autor: H.Sporenberg

Bezier-Kurven Das Herz function draw(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); if(canvas.getContext){// Bezier curves example context.beginPath(); context.moveTo(75,40); context.fillStyle="#ff0000"; context.lineWidth=„8“; context.bezierCurveTo(75,37,70,25,50,25); context.bezierCurveTo(20,25,20,62.5,20,62.5); context.bezierCurveTo(20,80,40,102,75,120); context.bezierCurveTo(110,102,130,80,130,62.5); context.bezierCurveTo(130,62.5,130,25,100,25); context.bezierCurveTo(85,25,75,37,75,40); context.fill(); context.stroke(); } } Autor: H.Sporenberg

1. Arbeit – Diff-Kurs 9 Schuljahr 2009/10 <canvas id="canvasKreis" width="200" height="100"> Dein Browser unterstützt das Canvas-Element nicht. </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvasKreis"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.beginPath(); context.arc(70, 50, 30, 0, Math.PI * 2, true); context.closePath(); context.fill(); </script> Autor: H.Sporenberg

1. Arbeit – Diff-Kurs 9 Schuljahr 2009/10 <html> <head> <title>Canvas tutorial template</title> <script type="text/javascript"> var test = false; function init() { draw(); setInterval(draw, 5000); } function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); if(test == false) { ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); } else { ctx.fillStyle = "rgb(0,200,0)"; ctx.fillRect (10, 10, 55, 50); } test = !test; } } </script> <style type="text/css"> canvas { border: 2px solid black; } </style> </head> <body onload="init();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> Autor: H.Sporenberg

Internetadressen canvas „ „ „ Für Games „ „ Autor: H.Sporenberg

1. Arbeit – Diff-Kurs 9 Schuljahr 2009/10 <body> <form name="PrimzahlFormular" action=""> <p>Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.</p> <input type="text" name="Eingabezahl"> <input type="button" value="auf Primzahl checken" onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)"> </form> </body> </html> Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr 1.Aufgabe: Stelle mit Hilfe von HTML5 und dem <canvas>-Tag die Bundestagswahlergebnisse von 2005 und 2009 in einem Säulendiagramm dar. Dabei sollen die Säulen der beiden Wahlen einer Partei nebeneinander mit den entsprechenden Prozentzahlen erscheinen. Die Säulen sollen entsprechend den Parteien eine andere Farbe haben, die Säulen für die Wahl aus dem Jahr 2005 soll dabei durchscheinend sein (Farbangabe mit rgba). Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier). Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr 2.Aufgabe: Die Sitzverteilung für den Bundestag 2009 soll in einem Kreisdiagramm in HMTL5 mit dem canvas-Tag dargestellt werden. Dazu müssen die einzelnen Kreissegmente (Winkel) der jeweiligen Anzahl der Sitze berechnet werden und dann entsprechend in einen Kreisbogen umgesetzt werden. Zusätzlich ist eine Beschriftung (Partei plus Anzahl der Sitze) vorzunehmen. Die erforderlichen Daten entnimmt man der 1. Aufgabe. Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier). Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr 3.Aufgabe: Die Gewinne und Verluste in Prozentpunkten, die die Parteien von der Bundestagswahl 2005 zur Bundestagswahl 2009 erfahren haben, sollen mit Hilfe eines dynamischen Säulendiagramms in HTML5 mit dem canvas-Tag dargestellt werden (dynamisch = die Säulen müssen animiert werden!). Die erforderlichen Daten für Verlust/Gewinn entnimmt man der 1. Aufgabe. Die HTML-Datei muss in elektronischer Form vorliegen, der Code muss an den entscheidenden Stellen kommentiert und erläutert werden (in schriftlicher Form auf Papier). Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr <html> <head> <title>Bundestagswahl - Facharbeit Schüler Diff 9</title> <script type="application/javascript"> function draw(){ var canvas = document.getElementById('testcanvas'); var ctx = canvas.getContext('2d'); if(canvas.getContext){ //Beschriftung der Säule ctx.font = "14pt Verdana"; ctx.fillStyle = "#222222"; // text color ctx.fillText("SPD", 65, 230); ctx.font = "10pt Verdana"; ctx.fillText("23,0%", 27, 80); ctx.fillText("34,2%", 85, 60); // Text ctx.font = "18pt Verdana"; ctx.fillStyle = "#000000"; ctx.fillText("Bundestagswahlen 2009", 50, 290); // Grundlinie für die Säule ctx.lineWidth="8"; ctx.strokeStyle = "#444444"; ctx.moveTo( 20, 205 ); ctx.lineTo(450, 205 ); ctx.stroke(); Anlagen – Quellcode für die 1. Aufgabe Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr Anlagen – Quellcode für die 1. Aufgabe //SPD 2009 ctx.fillStyle = "rgb(255, 0,0)"; ctx.rect(25,90, 50, 105); ctx.fill(); ctx.lineWidth = "4"; ctx.strokeStyle ="#343434"; ctx.stroke(); //SPD 2005 ctx.fillStyle = "rgba(255,0,0,0.4)"; ctx.rect(85,70, 50, 125); //Rechteck neu zeichnen ctx.fill(); //Rechteck wird mit der Farbe (255,0,0,0.7) gefüllt ctx.strokeStyle = "#343434"; } </script> </head> <body onload="draw()"> <canvas id="testcanvas" width="450" height="400"></canvas> </body> Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr <html> <head> <title>Kreisbogen - Schüler</title> <style type="text/css"> canvas{border: 10px ridge black; } </style> <script type="application/javascript"> function draw(){ var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); if(canvas.getContext){ context.beginPath(); context.moveTo(300,200); context.lineTo(200,200); context.fillStyle = "#ff4500"; context.lineWidth=4; context.strokeStyle="#454545"; context.arc(200, 200, 100, 4/5*Math.PI, 2*Math.PI,true); context.fill(); context.stroke(); context.font = "16pt Verdana"; context.fillStyle = "#222222"; // text color context.fillText("SPD", 190, 340); context.font = "18pt Verdana"; context.fillText("146", 190, 255); }} </script></head> Anlagen – Quellcode für die 2. Aufgabe Autor: H.Sporenberg

Hausarbeit – Diff-Kurs 9 Schuljahr 2011/12 – 1. Halbjahr Anlagen – Quellcode für die 2. Aufgabe <body onload="draw()"> <canvas id="testcanvas" width="400" height="400"></canvas> </body> </html> Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden Voraussetzungen: Das Rechteck soll an der Stelle (50/200) im Koordinatenkreuz seine linke untere Ecke haben und dann nach oben wachsen. Das Rechteck soll eine Höhe von 100 Pixel erreichen. Die Breite bleibt konstant bei 50 Pixel. Realisierung: Die y-Koordinate muss bei jedem Aufruf kleiner werden (ay = ay-1), im gleichen Maße muss aber die Länge des Rechtecks zunehmen (Laengey = Laengey+1). Ändert man bei ay die Abnahme auf 2 Pixel, muss dies auch bei der Länge des Rechtecks geschehen. Diese Abnahme könnte man auch als Variable gestalten – dieser Variablen muss natürlich ein Wert zugewiesen werden ay=ay-Abnahme; Laengey=Laengey+Abnahme; Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 0); } } function animate(context, ay, Laengey){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); ay=ay-1; Laengey=Laengey+1; if(ay<100){ay=200;Laengey=0;}; self.animate(context, ay, Laengey); }, 40);} In diesem Beispiel beginnt die Animation des Rechtecks, sobald die Länge 100 erreicht wurde wieder von vorn. Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 0); } } function animate(context, ay, Laengey){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); ay=ay-1; Laengey=Laengey+1; if(ay<100){ay=100;Laengey=100;}; self.animate(context, ay, Laengey); }, 40);} Wenn das Rechteck, sobald es die Länge 100 erreicht, sein Aussehen nicht mehr verändern soll, kann man dieses auf 2 Arten erreichen. 1. In der if-Abfrage setzt man ay=100 und Laengey=100. 2. Man springt wieder zurück und beendet in der if-Abfrage mit return. Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 0); } } function animate(context, ay, Laengey){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); ay=ay-1; Laengey=Laengey+1; if(ay<100){return}; self.animate(context, ay, Laengey); }, 40);} Wenn das Rechteck, sobald es die Länge 100 erreicht, sein Aussehen nicht mehr verändern soll, kann man dieses auf 2 Arten erreichen. 1. In der if-Abfrage setzt man ay=100 und Laengey=100. 2. Man springt wieder zurück und beendet in der if-Abfrage mit return. Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 0); } } function animate(context, ay, Laengey){ setTimeout(function(){ context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); context.lineWidth="10"; context.strokeStyle = "#444444"; context.moveTo( 20, 205 ); context.lineTo(450, 205 ); context.stroke(); ay=ay-1; Laengey=Laengey+1; if(ay<100){ay=100;Laengey=100;}; self.animate(context, ay, Laengey); }, 40);} Das Rechteck steht jetzt auf einer waagrechten Linie. Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200, 0); } } Die Säule wird jetzt beschriftet: Unter der Säule steht der Name der Partei, über der Säule die erreichte Prozentzahl. Autor: H.Sporenberg

Ein Rechteck soll nach oben wachsend animiert werden function animate(context, ay, Laengey){ setTimeout(function(){ context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(50,ay,50,Laengey); context.lineWidth = "4"; context.strokeStyle = "#cdcdcd"; context.strokeRect(50,ay,50,Laengey); context.lineWidth="10"; context.strokeStyle = "#444444"; context.moveTo( 20, 205 ); context.lineTo(450, 205 ); context.stroke(); context.font = "14pt Verdana"; context.fillStyle = "#ff0000"; // text color context.fillText("SPD", 55, 230); context.font = "10pt Verdana"; context.fillText("23,0%", 58, 83); ay=ay-1; Laengey=Laengey+1; if(ay<100){ay=100;Laengey=100;}; self.animate(context, ay, Laengey); }, 40);} Der Balken wird jetzt beschriftet: Unter dem Rechteck steht der Name der Partei, über dem Rechteck die erreichte Prozentzahl Autor: H.Sporenberg

Zwei Rechtecke sollen nach oben wachsend animiert werden Jetzt sollen die Säulen, die die erreichten Prozentzahlen der Parteien darstellen, animiert werden (mit Angabe der Partei und der entsprechenden Prozentzahl). Da die Säulen wegen der unterschiedlichen Prozentzahlen auch unterschiedlich hoch sind, müssen für das Anhalten der verschiedenen Säulen jeweils unterschiedliche if-Abfragen eingefügt werden. Das bedeutet auch, dass für die Länge der Säulen unterschiedliche Variable benutzt werden müssen. Hier sind es ay1 bzw. ay2 und Laenge1y bzw. Laenge2y. Die Abnahme kann dagegen für beide Säulen gleich bleiben. Insgesamt hat man jetzt 6 Übergabeparameter. if(ay1<100){ay1=100;Laenge1y=100;}; if(ay2<50){ay2=50;Laenge2y=150;}; Die Säule 1 wird gestoppt, wenn ay1<100 ist, d.h. diese Säule ist = 100 Pixel hoch, die Säule 2 wird in der Animation gestoppt, wenn ay2<50 ist, d.h. die Säule ist = 150 Pixel hoch. Anmerkung: Die Säulen beginnen bei y = 200 nach oben an zu wachsen. Autor: H.Sporenberg

Die Übergabeparameter
JavaScript - Einführung Zwei Rechtecke sollen nach oben wachsend animiert werden function drawCanvas(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ var context = canvas.getContext('2d'); animate(context, 200,200, 0,0,1); } } Die Übergabeparameter function animate(context, ay1,ay2,Laenge1y,Laenge2y,Abnahme){ setTimeout(function(){ // Alles neu zeichnen context.clearRect(0,0,800,400); context.fillStyle = "rgb(0, 0, 255)"; // Farbe für die erste Säule context.fillRect(50,ay1,50,Laenge1y); // Zeichnen der ersten Säule context.lineWidth = "4"; // Dicke des Randes wird eingestellt context.strokeStyle = "#787878"; // Die Farbe des Randes wird eingestellt context.strokeRect(50,ay1,50,Laenge1y); // Der Rahmen wird gezeichnet Autor: H.Sporenberg

Zwei Rechtecke sollen nach oben wachsend animiert werden context.fillStyle = "rgb(255, 0, 0 )"; // Farbe für die zweite Säule context.fillRect(150,ay2,50,Laenge2y); // Zeichnen der zweiten Säule context.lineWidth = "4"; // Dicke des Randes wird eingestellt context.strokeStyle = "#787878"; // Die Farbe des Randes wird eingestellt context.strokeRect(150,ay2,50,Laenge2y); // Der Rahmen wird gezeichnet context.lineWidth="10"; // Die Dicke des waagerechten Strichs wird eingestellt context.strokeStyle = "#444444"; // Die Farbe des Strichs wird eingestellt context.moveTo( 20, 205 ); // Beginn des waagerechten Strichs context.lineTo(450, 205 ); // Ende des waagerechten Strichs context.stroke(); // Der Strich wird mit den Einstellungen gezeichnet Autor: H.Sporenberg

Zwei Rechtecke sollen nach oben wachsend animiert werden context.fillStyle = "#222222"; // Die Farbe der Schrift wird eingestellt context.font = "14pt Verdana"; // Die Schriftart und –größe werden eingestellt context.fillText("SPD", 55, 230); // Der Text wird ausgegeben context.font = "10pt Verdana"; // Die Schriftart und –größe werden eingestellt context.fillText("23,0%", 58, 83); // Die Prozentzahl wird ausgegeben context.font = "14pt Verdana"; // Dasselbe für die zweite Partei (CDU) context.fillText("CDU", 155, 230); context.font = "10pt Verdana"; context.fillText("32,0%", 158, 40); ay1=ay1-Abnahme; // Die y-Koordinate des ersten Rechtecks wird verkleinert ay2=ay2-Abnahme; // Die y-Koordinate des zweiten Rechtecks wird verkleinert Laenge1y=Laenge1y+Abnahme; // Die Länge des ersten Rechtecks wird vergrößert Laenge2y=Laenge2y+Abnahme; // Die Länge des zweiten Rechtecks wird vergrößert Autor: H.Sporenberg

Zwei Rechtecke sollen nach oben wachsend animiert werden if(ay1<100){ay1=100;Laenge1y=100;}; // Die Höhe des ersten Rechtecks ist erreicht if(ay2<50){ay2=50;Laenge2y=150;}; // Die Höhe des zweiten Rechtecks ist erreicht self.animate(context, ay1,ay2, Laenge1y,Laenge2y,Abnahme); }, 20);} // Rekursiver Aufruf der Funktion animate nach 20 Millisekunden Der Body <body onload="drawCanvas()"> <canvas id="canvas" width="800" height="400"> Ihre Browser ist nicht HTML5 tauglich. </canvas> </body> Autor: H.Sporenberg

Ein Kreis soll wie eine Billardkugel reflektiert werden <html> <head> <title>Kreis Reflexion</title> <script type="text/javascript"> var vx=4; var vy=4; var x1= 100; var y1=100; var radius=10; function draw(){ var canvas = document.getElementById('Canvas'); if (canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle="white"; context.fillRect(0,0,canvas.width, canvas.height); if ((x1 <radius)||(x1>canvas.width-radius)) vx=vx*(-1); if ((y1<radius)|| (y1>canvas.height-radius)) vy=vy*(-1); x1=x1+vx; y1=y1+vy; Autor: H.Sporenberg

Ein Kreis soll wie eine Billardkugel reflektiert werden context.fillStyle="red"; context.beginPath(); context.moveTo( x1, y1); context.arc(x1,y1,radius,0,Math.PI*2,true); context.fill(); } } </script> <style type="text/css"> canvas { border: 8px ridge black; } </style> </head> <body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300"> Ihr Browser kann kein Canvas! </canvas> </body> </html> Autor: H.Sporenberg

Ein Kreis soll wie eine Billardkugel reflektiert werden Autor: H.Sporenberg

Ein Quadrat soll an den Rändern reflektiert werden <html> <head> <title>Quadrat Reflexion</title> <script type="text/javascript"> var vx=2; var vy=2; var x1= 100; var y1=100; var Laenge=50; function draw(){ var canvas = document.getElementById('Canvas'); if (canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle="white"; context.fillRect(0,0,canvas.width, canvas.height); Autor: H.Sporenberg

Ein Quadrat soll an den Rändern reflektiert werden if ((x1<Laenge-50)||(x1>canvas.width-Laenge)) vx=vx*(-1); if ((y1<Laenge-50)|| (y1>canvas.height-Laenge)) vy=vy*(-1); x1=x1+vx; y1=y1+vy; context.fillStyle="red"; context.beginPath(); context.moveTo( x1, y1); context.fillRect(x1,y1,Laenge,Laenge); } } </script> <style type="text/css"> canvas { border: 8px ridge black; } </style> </head> <body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300"> Ihr Browser kann kein Canvas! </canvas> </body> </html> Autor: H.Sporenberg

Ein Quadrat soll an den Rändern reflektiert werden Autor: H.Sporenberg

Zwei Kreise mit unterschiedlichem Radius werden an einem Billardtisch reflektiert <html> <head> <title>Billard</title> <script type="text/javascript"> var vx1=2; var vy1=2; var vx2=-1; var vy2=-2; var x1= 100; var y1=100; var x2= 400; var y2=200; var radius1=20; var radius2=30; function draw(){ var canvas = document.getElementById('Canvas'); Autor: H.Sporenberg

Zwei Kreise mit unterschiedlichem Radius werden an einem Billardtisch reflektiert if (canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle="white"; context.fillRect(0,0,canvas.width, canvas.height); if ((x1<radius1)||(x1>canvas.width-radius1)) vx1=vx1*(-1) if ((y1<radius1)||(y1>canvas.height-radius1)) vy1=vy1*(-1); if ((x2<radius2)||(x2>canvas.width-radius2)) vx2=vx2*(-1) if ((y2<radius2)||(y2>canvas.height-radius2)) vy2=vy2*(-1); x1=x1+vx1; y1=y1+vy1; x2=x2+vx2; y2=y2+vy2; context.fillStyle="#FFC125"; context.beginPath(); context.moveTo( x1, y1); context.arc(x1,y1,radius1,0,Math.PI*2,true); context.fill(); Autor: H.Sporenberg

Zwei Kreise mit unterschiedlichem Radius werden an einem Billardtisch reflektiert context.fillStyle="#FF0000"; context.beginPath(); context.moveTo( x2, y2); context.arc(x2,y2,radius2,0,Math.PI*2,true); context.fill(); } } </script> <style type="text/css"> canvas { border: 10px ridge blue; } </style> </head> <body onload="setInterval('draw()',10);"> <canvas id="Canvas" width="500" height="300"> Ihr Browser kann kein Canvas! </canvas> </body> </html> Autor: H.Sporenberg

Zwei Kreise mit unterschiedlichem Radius werden an einem Billardtisch reflektiert Autor: H.Sporenberg

Rotation eines Kreises um einen beliebigen Punkt var WinkelGrad=60; // Hier wird die Größe des Winkels festgelegt, um den gedreht werden soll function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.fillStyle='#ffff00'; context.arc(150,150,20,0,Math.PI*2,true); context.fill(); context.closePath(); context.fillStyle='#454545'; context.arc(250,150,10,0,Math.PI*2,true); Dargestellt wird einmal der Kreis, der gedreht werden soll, dann der Mittelpunkt als grauer Kreis mit kleinerem Radius. Autor: H.Sporenberg

Rotation eines Kreises um einen beliebigen Punkt context.save(); // Der momentane Zustand wird gespeichert context.translate(250,150); // Der Rotationsmittelpunkt wird verschoben context.rotate(2*Math.PI/360*WinkelGrad); // Es wird um den angegebenen Winkel gedreht context.translate(-250,-150); //Es wird wieder zurück verschoben context.beginPath(); context.fillStyle='#ff0000'; // Die Farbe des Kreises wird eingestellt context.arc(150,150,20,0,Math.PI*2,true); // Der Kreis wird vorbereitet context.fill(); // Der Kreis wird mit der eingestellten Farbe gefüllt context.closePath(); context.restore(); // Der Zustand vor der Rotation wird wieder hergestellt, damit alle //weiteren Elemente nicht gedreht werden. } Autor: H.Sporenberg

Rotation eines Kreises um einen beliebigen Punkt Autor: H.Sporenberg

Wiederholte Rotation eines Kreises um einen beliebigen Punkt Jetzt soll das Programm so erweitert werden, dass der Kreis wiederholt um den gleichen Winkel um ein Zentrum gedreht werden soll. Dieser Winkel kann eingestellt werden durch die Zuweisung im Programm (keine Eingabe über den Monitor). var WinkelGrad=0; function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.save(); context.translate(250,150); context.rotate(2*Math.PI/360*WinkelGrad); context.translate(-250,-150); context.beginPath(); context.fillStyle='#ff0000'; context.arc(150,150,20,0,Math.PI*2,true); context.fill(); context.closePath(); context.restore(); WinkelGrad=WinkelGrad+30; } Autor: H.Sporenberg

Wiederholte Rotation eines Kreises um einen beliebigen Punkt var WinkelGrad=0; function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.save(); // Der momentane Zustand wird gespeichert context.translate(250,150); // Der Drehpunkt wird verschoben context.rotate(2*Math.PI/360*WinkelGrad); // Es wird um den angegebenen Winkel gedreht context.translate(-250,-150); // Der Drehpunkt wird wieder zurückgeschoben context.beginPath(); context.fillStyle='#ff0000'; // Die Farbe wird eingestellt (hier: rot) context.arc(150,150,20,0,Math.PI*2,true); context.fill(); context.closePath(); context.restore(); WinkelGrad=WinkelGrad+30; } Autor: H.Sporenberg

WinkelGrad=WinkelGrad+1;
JavaScript - Einführung Wiederholte Rotation eines Kreises um einen beliebigen Punkt Die Kreise werden jeweils um weitere 30o gedreht (insgesamt also 12 Kreise). Verkleinert man die Gradzahl, so erhält man einen Kreisbogen. WinkelGrad=WinkelGrad+1; Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks Der obere linke Eckpunkt des Rechtecks hat die Koordinaten A(xko/yko), die Breite des Rechtecks ist breite und die Höhe ist hoehe. Dann sind die Koordinaten des Mittelpunkts des Rechtecks M(xko+breite/2;yko+hoehe/2). Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks Der Koordinatenursprung wird als erstes in den Mittelpunkt des Rechtecks verschoben: context.translate(xko+breite/2,yko+hoehe/2) Dann wird um den vorgesehenen Winkel gedreht: context.rotate(Winkel*Math.Pi/180) Jetzt verschiebt man wieder zurück um dieselben Werte: context.translate(-(xko+breite/2),-(yko+hoehe/2)). Als nächstes wird mit Hilfe von context.fillRect(xko,yko,breite,hoehe) das entsprechende Rechteck mit der eingestellten Farbe gefüllt. Zusätzlich muss noch folgendes durchgeführt werden: context.save(); // Der momentane Zustand wird gespeichert und am Ende context.restore(); // Der Zustand vor der Rotation wird wieder hergestellt, damit alle //weiteren Elemente nicht gedreht werden. Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks var xko=200; var yko=150; var breite=300; var hoehe=50; Damit sieht das komplette Programm wie folgt aus: function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Clear the canvas context.clearRect(0, 0,600, 500); context.fillStyle = "#ffdead"; // context.fillRect(xko,yko,breite,hoehe); context.strokeStyle = "#aaaaaa"; context.lineWidth = "6"; context.strokeRect(xko,yko,breite,hoehe); context.fillStyle="#0000ff"; context.arc(xko+breite/2,yko+hoehe/2,10,0,Math.PI*2,true); context.fill(); // weiter siehe nächste Folie Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks // Das ursprüngliche Rechteck vor der Drehung context.save(); context.translate(xko+breite/2,yko+hoehe/2); context.rotate(Winkel*Math.PI / 180); context.translate(-(xko+breite/2), -(yko+hoehe/2)); context.beginPath(); context.fillStyle = "rgba(255,0,0,0.3)"; context.fillRect(xko,yko,breite,hoehe); // Das gedrehte Rechteck (rot) context.strokeRect(xko,yko,breite,hoehe); context.closePath(); context.restore(); } Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks Gedrehtes Rechteck Ursprungsrechteck Drehpunkt Autor: H.Sporenberg

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks animiert Als Erweiterung soll jetzt ein Programm geschrieben werden, das ein Rechteck um dessen Mittelpunkt animiert. Variabel ist dabei der Winkel, um den jeweils gedreht wird. function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // canvas wird gelöscht context.clearRect(0, 0,600, 500); context.save(); context.fillStyle="#0000ff"; context.arc(xko+breite/2,yko+hoehe/2,10,0,Math.PI*2,true); context.fill(); //Mittelpunkt wird gezeichnet als Kreis context.translate(xko+breite/2,yko+hoehe/2); // Weiter auf nächster Folie var xko=200; var yko=100; var breite=150; var hoehe=100; var Winkel=0; Autor: H.Sporenberg RotierenEinRechteckMittelpunkt.html

Drehung eines Rechtecks um den Mittelpunkt des Rechtecks animiert // Drehung um Winkel context.rotate(Winkel*Math.PI / 180); context.translate(-(xko+breite/2), -(yko+hoehe/2)); context.beginPath(); context.fillStyle = "rgba(255,0,0,0.5)"; context.fillRect(xko,yko,breite,hoehe); context.closePath(); context.restore(); Winkel=Winkel+5; } Der Body <body onload="setInterval('draw()',40);"> <canvas id="canvas" width="600" height="500"></canvas> </body> Autor: H.Sporenberg RotierenEinRechteckMittelpunkt.html

Drehung eines Rechtecks um einen beliebigen Punkt var xko=300; var yko=250; var breite=100; var hoehe=20; var Winkel=60; var xrot=500; var yrot=250; function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Clear the canvas context.clearRect(0, 0,900, 600); context.fillStyle = "#ffdead"; // context.fillRect(xko,yko,breite,hoehe); // Rechteck vor der Drehung context.strokeStyle = "#aaaaaa"; context.lineWidth = "6"; context.strokeRect(xko,yko,breite,hoehe); context.fillStyle="#0000ff"; context.arc(xrot,yrot,10,0,Math.PI*2,true); context.fill(); // Der Drehpunkt blau markiert Autor: H.Sporenberg RotierenNurEinRechteckBeliebigerPunkt.html

Drehung eines Rechtecks um einen beliebigen Punkt context.save(); context.translate(xrot,yrot); context.rotate(Winkel*Math.PI / 180); context.translate(-xrot,-yrot); context.beginPath(); context.fillStyle = "rgba(255,0,0,0.3)"; context.fillRect(xko,yko,breite,hoehe); // Das gedrehte Rechteck (rot) context.strokeRect(xko,yko,breite,hoehe); context.closePath(); context.restore(); } Der Body <body onload='draw()'> <canvas id="canvas" width="900" height="600"></canvas> </body> Autor: H.Sporenberg RotierenNurEinRechteckBeliebigerPunkt.html

Drehung eines Rechtecks um einen beliebigen Punkt Der Body Autor: H.Sporenberg RotierenNurEinRechteckBeliebigerPunkt.html

Drehung eines Rechtecks um einen beliebigen Punkt animiert var xko=300; var yko=250; var breite=100; var hoehe=20; var Winkel=0; var xrot=500; var yrot=250; function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // Clear the canvas context.clearRect(0, 0,900, 600); context.fillStyle = "#ffdead"; // context.fillRect(xko,yko,breite,hoehe); // Das ursprüngliche Rechteck vor der Drehung context.strokeStyle = "#aaaaaa"; context.lineWidth = "6"; context.strokeRect(xko,yko,breite,hoehe); context.fillStyle="#0000ff"; context.arc(xrot,yrot,10,0,Math.PI*2,true); context.fill(); // Drehpunkt blau markiert Autor: H.Sporenberg RotierenNurEinRechteckBeliebigerPunkt.html

Drehung eines Rechtecks um einen beliebigen Punkt animiert context.save(); context.translate(xrot,yrot); context.rotate(Winkel*Math.PI / 180); context.translate(-xrot,-yrot); context.beginPath(); context.fillStyle = "rgba(255,0,0,0.3)"; context.fillRect(xko,yko,breite,hoehe); // Das gedrehte Rechteck (rot) context.strokeRect(xko,yko,breite,hoehe); context.closePath(); context.restore(); Winkel=Winkel+1; } Der Body <body onload="setInterval('draw()',40);"> <canvas id="canvas" width="600" height="500"></canvas> </body> Autor: H.Sporenberg RotierenNurEinRechteckBeliebigerPunkt.html

Die Libray RGraph Wie bei der Darstellung der Ergebnisse der letzten Bundestagswahl gezeigt (siehe Folie …), kann man mit Hilfe der canvas-Fläche mit einem gewissen Aufwand eine ansprechende Visualisierung erreichen. Der Nachteil ist, dass die verschiedenen Möglichkeiten in ein JavaScript-Programm übertragen werden müssen. So sind z.B. die verschiedenen Säulen der Ergebnisse mit den Parteinamen und den jeweiligen Prozentzahlen zu versehen. Dies geschieht durch eine Programmierung, bei der der Text an verschiedenen Stellen ausgegeben wird. Hierzu müssen die entsprechenden x- und y-Koordinaten genau berechnet werden. Die Seite lautet: Autor: H.Sporenberg

Die Libray RGraph Autor: H.Sporenberg Die Seite lautet:

Die Libray RGraph – Als erstes müssen die entsprechenden JavaScript-Bibliotheken geladen werden. Benötigt werden je nach Auswahl der Darstellung unterschiedliche Dateien. <script src="RGraph.common.core.js"></script> <script src="RGraph.common.annotate.js"></script>  <script src="RGraph.common.context.js"></script>  <script src="RGraph.common.effects.js"></script>  <script src="RGraph.common.key.js"></script>  <script src="RGraph.common.resizing.js"></script>  <script src="RGraph.common.tooltips.js"></script>  <script src="RGraph.common.zoom.js"></script>  <script src="RGraph.bar.js"></script>  <script src="RGraph.bipolar.js"></script>  <script src="RGraph.cornergauge.js"></script>  <script src="RGraph.fuel.js"></script>  <script src="RGraph.funnel.js"></script>  <script src="RGraph.gantt.js"></script>  <script src="RGraph.gauge.js"></script>  <script src="RGraph.hbar.js"></script>  Autor: H.Sporenberg

Die Libray RGraph – <script src="RGraph.hbar.js"></script>  <script src="RGraph.hprogress.js"></script>  <script src="RGraph.led.js"></script>  <script src="RGraph.line.js"></script>  <script src="RGraph.meter.js"></script>  <script src="RGraph.odo.js"></script>  <script src="RGraph.pie.js"></script>  <script src="RGraph.radar.js"></script>  <script src="RGraph.rose.js"></script>  <script src="RGraph.rscatter.js"></script>  <script src="RGraph.scatter.js"></script>  <script src="RGraph.thermometer.js"></script>  <script src="RGraph.vprogress.js"></script>  <script src="RGraph.waterfall.js"></script>  Wie man sieht, müssen nicht alle Dateien geladen werden. Autor: H.Sporenberg

Die Libray RGraph – Im Body muss natürlich ein canvas-Element definiert werden <body> <canvas id="Canvas" width="600" height="400">Canvas wird nicht unterstützt</canvas> </body> Autor: H.Sporenberg

Die Libray RGraph – <script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script> <!—Wird benötigt für Säulendiagramme --> Gehört auf jeden Fall in den Head <script> window.onload = function () { var data = [[8,7,9]]; var bar = new RGraph.Bar('Canvas', data); bar.Set('chart.labels', ['ARD', 'ZDF','RTL']); bar.Set('chart.gutter.left', 80); bar.Set('chart.gutter.top', 80); bar.Set('chart.text.font', 'Verdana'); bar.Set('chart.text.size', 15); bar.Set('chart.text.color', '#0000ff'); bar.Set('chart.title','Zuschauerzahlen'); bar.Set('chart.hmargin', 15); bar.Set('chart.hmargin.grouped', 20); bar.Set('chart.colors', ['#ff0000','#ffff00','#cdff00']); bar.Draw(); } </script> Im Head oder auch im Body muss dann das JavaScript-Programm mit den entsprechenden Methoden geschrieben und aufgerufen werden. Hier ein Beispiel: Autor: H.Sporenberg

Die Libray RGraph – Autor: H.Sporenberg

Die Libray RGraph – Bundestagswahlen Im Unterschied zum letzten Beispiel sind hier für eine Partei je zwei Säulen für die Ergebnisse der Bundestagswahlen 2005 und 2009 zu erzeugen. window.onload = function () { var data = [[43,33],[37,42]]; // die zu den einzelnen Parteien gehörenden // Prozentzahlen werden jeweils in eckigen Klammern zusammengefasst. var bar = new RGraph.Bar('canvas', data); bar.Set('chart.title.font','Arial'); // Die Schriftart für den Titel wird vereinbart bar.Set('chart.title.size',22); // Die Schriftgröße für den Titel wird vereinbart bar.Set('chart.title','Bundestagswahl'); // Ausgabe des Titels bar.Set('chart.text.font', 'Verdana'); // Die Schriftart für den Text wird vereinbart bar.Set('chart.text.size', 14); // Die Schriftgröße für den Text wird vereinbart bar.Set('chart.text.color', '#343434'); // Die Schriftfarbe für den Text wird vereinbart bar.Set('chart.labels', ['SPD', 'CDU']); // Die Daten für die x-Achse werden ausgeg. bar.Set('chart.gutter.left', 80); bar.Set('chart.gutter.top', 50); Autor: H.Sporenberg

Die Libray RGraph – bar.Set('chart.hmargin', 15); bar.Set('chart.title.xaxis.pos', 0.5); bar.Set('chart.title.yaxis.pos', 0.1); bar.Set('chart.title.xaxis.size', 14); bar.Set('chart.title.xaxis', 'Parteien'); bar.Set('chart.labels.above.decimals', 0); bar.Set('chart.labels.above', 'true'); // Die Zahlenangaben werden oberhalb der Säulen ausgedruckt bar.Set('chart.hmargin.grouped', 30); bar.Set('chart.strokestyle', '#676767'); bar.Set('chart.colors.sequential', 'true'); // Hier wird festgelegt, dass die angegebenen Farben der Reihenfolge nach // verwendet werden. bar.Set('chart.colors', ['#ff0000','#ff5555','#0000ff','#5555ff']); // Die Farben der Säulen werden festgelegt – der Reihenfolge nach bar.Draw(); } </script> Autor: H.Sporenberg

Die Libray RGraph – Autor: H.Sporenberg

Die Libray RGraph – Der 3D-Effekt Es gibt noch viele andere Möglichkeiten, die Darstellung der Säulendiagramme zu beeinflussen. Diese können in der Auflistung der verschiedenen Befehle nachgesehen werden. Eine interessante Möglichkeit ist, die Säulen mit einem 3D-Effekt darzustellen. Im Prinzip wird dies durch folgenden Befehl erreicht: bar.Set('chart.variant', '3d'); Autor: H.Sporenberg

Die Libray RGraph – Der 3D-Effekt window.onload = function () { var bar = new RGraph.Bar('canvas', [[21,31],[13, 43],[42, 25],[42, 29],[59, 28],[40, 10]]); bar.Set('chart.colors', ['#2A17B1', '#98ED00']); bar.Set('chart.labels', ['2007', '2008', '2009', '2010', '2011', '2012']); bar.Set('chart.text.font', 'Verdana'); bar.Set('chart.text.size', 13); bar.Set('chart.text.color', '#343434'); bar.Set('chart.numyticks', 5); bar.Set('chart.ylabels.count', 5); bar.Set('chart.gutter.left', 50); bar.Set('chart.variant', '3d'); bar.Set('chart.labels.above', 'true'); bar.Set('chart.strokestyle', 'transparent'); bar.Set('chart.hmargin.grouped', 0); bar.Set('chart.scale.round', false); bar.Draw(); } Autor: H.Sporenberg

Die Libray RGraph – Der 3D-Effekt Autor: H.Sporenberg

Die Libray RGraph – LIniendiagramme Um ein Liniendiagramm zu erstellen, müssen die benötigten Libraries geladen werden. Dieses geschieht mit: <script src="RGraph.common.core.js" ></script> <script src="RGraph.common.dynamic.js" ></script> <script src="RGraph.line.js" ></script> Speziell für die Liniengraphik ist die fettgedruckte Datei nötig. Autor: H.Sporenberg

Die Libray RGraph – LIniendiagramme <script> window.onload = function () { var line = new RGraph.Line('canvas', [3,7,5,12,8]); line.Set('chart.labels', [' ',' ',' ',' ',' ']); line.Set('chart.title.font','Arial'); // Die Schriftart für den Titel wird vereinbart line.Set('chart.title.size',20); // Die Schriftgröße für den Titel wird vereinbart line.Set('chart.title','Temperaturen'); line.Set('chart.curvy', true); line.Set('chart.tickmarks', true); line.Set('chart.linewidth', 4); line.Set('chart.gutter.left', 80); line.Set('chart.gutter.top', 50); line.Set('chart.text.font', 'Verdana'); // Die Schriftart für den Text wird vereinbart line.Set('chart.text.size', 11); // Die Schriftgröße für den Text wird vereinbart line.Set('chart.text.color', '#343434'); line.Set('chart.tickmarks.dot.color','#0000ff'); line.Set('chart.tickmarks', 'circle'); line.Set('chart.tickmarks.size', 40); line.Draw() } </script> Autor: H.Sporenberg

Die Libray RGraph – LIniendiagramme Autor: H.Sporenberg

Die Libray RGraph – Torten- oder Kreisdiagramme Um ein Liniendiagramm zu erstellen, müssen die benötigten Libraries geladen werden. Dieses geschieht mit: <script src="RGraph.common.core.js" ></script> <script src="RGraph.common.dynamic.js" ></script> <script src="RGraph.pie.js" ></script> Speziell für die Tortengraphik ist die fettgedruckte Datei nötig. Autor: H.Sporenberg

Die Libray RGraph – Torten- oder Kreisdiagramme window.onload = function () { var pie = new RGraph.Pie('canvas', [239,146,93,68,76]); pie.Set('chart.colors', ['#0000ff','#ff7878','#ffff00','#00ff00','#ff0000']); pie.Set('chart.tooltips',['239','146','93','68','76']); pie.Set('chart.exploded', [10]); pie.Set('chart.gutter.bottom',60); pie.Set('chart.text.font', 'Verdana'); pie.Set('chart.text.size', 14); pie.Set('chart.text.color', '#343434'); pie.Set('chart.labels', ['CDU/CSU','SPD','FDP','Grüne','PDS/Linke']); pie.Draw(); } Autor: H.Sporenberg

Die Libray RGraph – Torten- oder Kreisdiagramme Autor: H.Sporenberg

Die Libray RGraph – Animationen Für alle Diagrammarten gibt es Möglichkeiten, diese zu animieren. Für alle Animationen gilt: der Befehl pie.Draw(); bar.Draw() bzw. line.Draw() wird durch den entsprechenden Animationsaufruf ersetzt. Um diese Befehle abrufen zu können, müssen zusätzliche Dateien geladen werden. Dies geschieht durch: <script src="RGraph.common.dynamic.js" ></script> <script src="RGraph.common.tooltips.js" ></script> <script src="RGraph.common.effects.js" ></script> <script src="jquery.min.js" ></script> Autor: H.Sporenberg

Die Libray RGraph – Verschiedene Animationen - Säulendiagramm window.onload = function () { var data = [[8,7,9]]; var bar = new RGraph.Bar('canvas', data); bar.Set('chart.labels', ['ARD', 'ZDF','RTL']); bar.Set('chart.gutter.left', 80); bar.Set('chart.gutter.top', 80); bar.Set('chart.text.font', 'Verdana'); bar.Set('chart.text.size', 15); bar.Set('chart.text.color', '#0000ff'); bar.Set('chart.title','Zuschauerzahlen'); bar.Set('chart.hmargin', 15); bar.Set('chart.hmargin.grouped', 20); bar.Set('chart.colors', ['#ff0000','#ffff00','#cdff00']); RGraph.Effects.Bar.Grow(bar); } Autor: H.Sporenberg

Die Libray RGraph – Verschiedene Animationen - Säulendiagramm window.onload = function () { var data = [[8,7,9]]; var bar = new RGraph.Bar('canvas', data); bar.Set('chart.labels', ['ARD', 'ZDF','RTL']); bar.Set('chart.gutter.left', 80); bar.Set('chart.gutter.top', 80); bar.Set('chart.text.font', 'Verdana'); bar.Set('chart.text.size', 15); bar.Set('chart.text.color', '#0000ff'); bar.Set('chart.title','Zuschauerzahlen'); bar.Set('chart.hmargin', 15); bar.Set('chart.hmargin.grouped', 20); bar.Set('chart.colors', ['#ff0000','#ffff00','#cdff00']); RGraph.Effects.Fade.In(bar); } Autor: H.Sporenberg

Die Libray RGraph – Verschiedene Animationen - Säulendiagramm window.onload = function () { var data = [[8,7,9]]; var bar = new RGraph.Bar('canvas', data); bar.Set('chart.labels', ['ARD', 'ZDF','RTL']); bar.Set('chart.gutter.left', 80); bar.Set('chart.gutter.top', 80); bar.Set('chart.text.font', 'Verdana'); bar.Set('chart.text.size', 15); bar.Set('chart.text.color', '#0000ff'); bar.Set('chart.title','Zuschauerzahlen'); bar.Set('chart.hmargin', 15); bar.Set('chart.hmargin.grouped', 20); bar.Set('chart.colors', ['#ff0000','#ffff00','#cdff00']); RGraph.Effects.jQuery.Expand(bar); } Autor: H.Sporenberg

Die Libray RGraph – Verschiedene Animationen - Liniendiagramm window.onload = function () { var line = new RGraph.Line('canvas', [3,7,5,12,8]); line.Set('chart.labels', [' ',' ',' ',' ',' ']); line.Set('chart.title.font','Arial'); line.Set('chart.title.size',20); line.Set('chart.title','Temperaturen'); line.Set('chart.curvy', true); line.Set('chart.tickmarks', true); line.Set('chart.linewidth', 4); line.Set('chart.gutter.left', 80); line.Set('chart.gutter.right', 50); line.Set('chart.gutter.top', 50); line.Set('chart.text.font', 'Verdana'); line.Set('chart.text.size', 11); line.Set('chart.text.color', '#343434'); line.Set('chart.tickmarks.dot.color','#0000ff'); line.Set('chart.tickmarks', 'circle'); line.Set('chart.tickmarks.size', 40); RGraph.Effects.Line.jQuery.Trace(line); } Autor: H.Sporenberg

Die Libray RGraph – Verschiedene Animationen - Tortendiagramm window.onload = function () { var pie = new RGraph.Pie('canvas', [2,4,7,4,3,1]); pie.Set('chart.colors', ['#0000ff','#ff7878','#ffff00','#00ff00','#ff0000']); pie.Set('chart.tooltips',['2','4','7','4','3','1']); pie.Set('chart.exploded', [10]); pie.Set('chart.gutter.bottom',60); pie.Set('chart.text.font', 'Verdana'); pie.Set('chart.text.size', 14); pie.Set('chart.text.color', '#343434'); pie.Set('chart.labels', ['sehr gut','gut','befriedigend','ausreichend','mangelhaft','ungenügend']); RGraph.Effects.Pie.Implode(pie); } Autor: H.Sporenberg

Die Libray RGraph – Diagramme mit unterschiedlichen Skalen window.onload = function () { var pie = new RGraph.Pie('canvas', [2,4,7,4,3,1]); pie.Set('chart.colors', ['#0000ff','#ff7878','#ffff00','#00ff00','#ff0000']); pie.Set('chart.tooltips',['2','4','7','4','3','1']); pie.Set('chart.exploded', [10]); pie.Set('chart.gutter.bottom',60); pie.Set('chart.text.font', 'Verdana'); pie.Set('chart.text.size', 14); pie.Set('chart.text.color', '#343434'); pie.Set('chart.labels', ['sehr gut','gut','befriedigend','ausreichend','mangelhaft','ungenügend']); RGraph.Effects.Pie.RoundRobin(pie); } Autor: H.Sporenberg

Event Handler Event-Handler, was so viel heißt wie "Ereignis-Behandler" ist kleiner JavaScript- Code, den Sie innerhalb von HTML-Tags als Attribut platzieren. Treten bestimmte Ereignisse ein wie ein Mausklick oder Tastendruck, leitet ein Event-Handler bestimmte Aktionen ein. Beispiel: <input type="button" value="Hallo Welt" onClick="alert('Hallo Welt!');"> Autor: H.Sporenberg

Event Handler Liste der Event Handler – Teil 1 onAbort: Führt Javascript-Code aus, wenn der Benutzer eine Aktion abbricht. onBlur: Führt Javascript-Code aus, wenn ein Element einer Webseite den Fokus verliert, zum Beispiel ein Formular, ein Fenster oder Frame. onChange: Führt Javascript-Code aus, wenn ein Eingabefeld den Fokus verliert. onClick: Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element auf der Webseite anklickt. onDblClick: Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element doppelt anklickt onDragdrop: Führt Javascript-Code aus, wenn der Benutzer ein Objekt in das Fenster seines Browsers zieht und dort fallen lässt. Autor: H.Sporenberg

Event Handler Liste der Event Handler – Teil 2 onError: Führt Javascript-Code aus, wenn ein Ladevorgang, etwa eines Bildes, einen Fehler verursacht. onFocus: Führt Javascript-Code aus, wenn ein Element den Fokus erhält. onKeydown: Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt. onKeypress: Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält. onKeyup: Führt Javascript-Code aus, wenn der Benutzer eine gedrückte Taste wieder loslässt. onResize: Führt Javascript-Code aus, wenn der Benutzer die Größe eines Fensters oder Frames verändert. Autor: H.Sporenberg

Event Handler Liste der Event Handler – Teil 3 onLoad: Führt Javascript-Code aus, der Browser ein Dokument geladen hat. onMousedown: Führt Javascript-Code aus, wenn der Benutzer eine Maustaste drückt. onMousemove: Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger auf der Webseite bewegt. onMouseout: Führt Javascript-Code aus, wenn der Mauszeiger einen aktiven Bereich verlässt. onMouseover: Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger über ein entsprechendes Element bewegt. onMouseup: Führt Javascript-Code aus, wenn der Benutzer die gedrückte Maustaste wieder loslässt. onMove: Führt Javascript-Code aus, wenn der Benutzer ein Fenster oder einen Frame bewegt. Autor: H.Sporenberg

Event Handler Liste der Event Handler – Teil 4 onReset: Führt Javascript-Code aus, wenn der Benutzer ein Formular zurücksetzt. onSelect: Führt Javascript-Code aus, wenn der Benutzer einen Bereich markiert. onSubmit: Führt Javascript-Code aus, wenn der Benutzer ein Formular abschickt. onUnload: Führt Javascript-Code aus, wenn der Benutzer ein Dokument verlässt. OnMouseWheel Führt Javascript-Code aus, wenn der Benutzer die Radtaste seiner Maus dreht. (nur I. Explorer) onInput: Führt Javascript-Code aus, wenn der Benutzer z.B.: einen Regler (<input type="range">) betätigt (HTML 5). Autor: H.Sporenberg

Standard HTML5 Event-Handler oninvalid onratechange oncontextmenu onkeydown onreadystatechange ondblclick onkeypress onscroll ondrag onkeyup onseeked ondragend onload* onseeking ondragenter onloadeddata onselectondragleave onloadedmetadata onshowondragover onloadstart onstalled ondragstart onmousedown onsubmit ondrop onmousemove onsuspend ondurationchange onmouseout ontimeupdate onemptied onmouseover onvolumechange onended onmouseup onwaiting onabort onerror* onmousewheel onblur* onfocus* onpause oncanplay onformchange onplay oncanplaythrough onforminput onplaying onchange oninput onprogress Autor: H.Sporenberg

Mouse-Events Man kann einen Maus-Klick auf der canvas erkennen. Dieses geschieht mit dem addEventListener. Es gibt einige Maus-Events, die angezeigt werden können. Dieses sind: mousedown, mouseup, mousemove, mouseout und mouseover. Programm, das mousedown anzeigt function initialize(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.addEventListener("mousedown",doMouseDown,false);} function doMouseDown(event){ canvas_x = event.pageX; canvas_y = event.pageY; alert("X=" + canvas_x + " Y=" + canvas_y);} Autor: H.Sporenberg

Mouse-Events Die Syntax für die Methode addEventListener: addEventListener(event_type, event_handler, capture) 1.event_type: dieses Argument stellt den Typ des Events dar: wie click, keypress, mouseover usw. 2.event_handler ist der Name der Funktion, die für das Event aufgerufen wird. 3.capture ist eine boolesche Variable, sie wird normalerweise auf false gesetzt, d.h. es wird kein anderes Event gewünscht function initialize(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.addEventListener("mousedown",doMouseDown,false);} Autor: H.Sporenberg

Mouse-Events Der Code im Body der HTML-Seite <body onload="initialize()"> <center> <canvas id="canvas" width="500" height="300"> </canvas> </center> </body> Autor: H.Sporenberg

Drag And Drop Verschieben eines Bildes auf der Canvas-Fläche Mit Hilfe der Drag And Drop Browser API kann ein Objekt auf einer Webseite angepackt (DRAG) und an einer anderen Stelle losgelassen werden (DROP). Eine Drag and Drop-Operation erfolgt im Prinzip in 4 Schritten 1.Es wird ein anfassbares (=draggable) Objekt erzeugt: das Attribute draggable muss auf true gesetzt werden 2.Bearbeite das angefasste Objekt mit Drag-events. 3.Das Objekt, das losgelassen werden soll, wird auf den Absetzplatz gebracht. 4.Vervollständige die Drag-Drop-Operation dadurch, dass des angefasste Objekt an das Ziel gebracht wird. Autor: H.Sporenberg

Drag And Drop 1.Erzeugen eines anfassbaren (=draggable) Objekts Als erstes muss der Browser erkennen, welches Objekt angefasst werden kann. Dazu muss die Attributsvariable draggable auf true gesetzt werden. draggable kann 3 Werte annehmen: 1.true: das Objekt kann angefasst werden 2.false: das Objekt kann nicht angefasst werden 3.auto: überlässt es dem Browser zu entscheiden, ob das Objekt angefasst werden kann. Das ist auch die Standardeinstellung In den meisten Browsern sind die Elemente <img> und <a> (für anchor) mit dem Attribut href und mit draggable =„true“ als Standardeinstellung abgegeben Der Programmcode <body> <img id="drag_me" src="NilsNora_3.jpg" draggable="true" ondragstart="drag(event)"> <div id="holder" ondrop="drop(event)" ondragover="allowDrop(event)"> Hier hin verschieben</div> </body> Autor: H.Sporenberg

Drag And Drop 2.Bearbeiten des angefassten Objekts Das angefasste Objekt muss jetzt mit einer Reihe von Event-Handlers bearbeitet werden. Als erstes wird der Event-Handler ondragstart für die anfassbaren Objekte bereit gestellt. Dieser Event-Handler ruft die Funktion drag und übergibt event als Argument. Die Drag-drop API hat viele Argumente. In diesem Fall benötigt man setData(format,Data) Format: kann zwei Werte annehmen, Text oder UrL. In diesem Fall ist es Text Data: Bezeichnet die Daten, die übermittel werden, in diesem Fall ist es die id des angefassten Objekts. Der Programmcode function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } Autor: H.Sporenberg

Drag And Drop 3.Den Bereich des Loslassens erhalten Nach dem Anfassen des Objekts, muss die Stelle gefunden werden, an dem das Objekt abgelegt wird. Für ein Objekt, das ein Ziel für das Loslassen gefunden hat, muss cancel die Standardeinstellung sein und das dragOver Event erhalten. Der Programmcode function drag(ev) function allowDrop(ev) { ev.preventDefault(); } Autor: H.Sporenberg

Drag And Drop 4.Vervollständigen der Drop-Operation Das Zielobjekt enthält das ondrop-Attribut mit dem drop – Event. Wenn man jetzt das angefasste Objekt am Ziel fallen lässt, dann ist das drop – Event gefeuert. Diese Funktion entfernt das angefasste Objekt von der Zielliste und fügt es zu den Zielobjekten des DOM. Benutzt wird die Standardmethode appendChild. Der Programmcode function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } Autor: H.Sporenberg

Drag And Drop – Der komplette Quellcode <html> <head> <style> #holder{width:230px;height:230px;padding:20px;float:left;border:20px solid #eee;box-shadow:5px 5px 5px #ccc;font:1.5em verdana;} #drag_me{width:187px; height:122px;} </style> Autor: H.Sporenberg

Drag And Drop – Der komplette Quellcode <script type="text/javascript"> function allowDrop(ev) {ev.preventDefault();} function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);} function drop(ev) {ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));} </script> </head> Autor: H.Sporenberg

Drag And Drop – Der komplette Quellcode <body> <img id="drag_me" src="NilsNora_3.jpg" draggable="true" ondragstart="drag(event)"> <div id="holder" ondrop="drop(event)" ondragover="allowDrop(event)"> Hier hin verschieben</div> </body> </html> Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus In diesem Beispiel wird ein 30x30 Pixel großes Quadrat mit Hilfe der Maus auf der Canvas bewegt. function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rect(x - 15, y - 15, 30, 30); } Durch die Angabe rect(x - 15, y - 15, 30, 30); erreicht man, dass x und y die Koordinaten des Mittelpunkts des Quadrats sind Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus Jetzt benötigt man einen Event-Listener, der erkennt ob die Maustaste gedrückt ist (=Beginn des Anfassens) oder wenn die Maustaste losgelassen wird (=Platzieren des Objekts) Nach dem Aufruf von init(), indem das Canvas-Objekt erzeugt wird, wird der Event Listener auf das neue Canvas-Objekt gesetzt. init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; When the user clicks their mouse on the canvas the canvas.onmousedown event is triggered and calls the function myDown(). myDown receives an event object e that has properties about the event. This event has, amongst others, the properties pageX and pageY which hold the values of the mouse’s current x and y coordinates on the page (not the window but the whole page). Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus function myDown(e){ if (e.pageX < x canvas.offsetLeft && e.pageX > x canvas.offsetLeft && e.pageY < y canvas.offsetTop && e.pageY > y canvas.offsetTop) { x = e.pageX ; y = e.pageY ; dragok = true; canvas.onmousemove = myMove; } } Die erste Frage ist, wenn der Mausklick auf der Canvas erfolgte, ob dieser Click auf dem anfassbaren Quadrat erfolgt ist. Dazu muss folgende Überprüfung durchgeführt werden: if (e.pageX < x canvas.offsetLeft && e.pageX > x canvas.offsetLeft && e.pageY < y canvas.offsetTop && e.pageY > y canvas.offsetTop) Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus if (e.pageX < x canvas.offsetLeft && e.pageX > x canvas.offsetLeft && e.pageY < y canvas.offsetTop && e.pageY > y canvas.offsetTop) Zur Erinnerung: Bei der Definition des Quadrats ist (x,y) der Mittelpunkt des Quadrats. Um zu bestimmen ob der Click einen x-Wert im Quadrat hat. Wir betrachten den x-wert des Maus-Clicks -> e.pageX und sehen, wenn es innerhalb von 15 Pixeln nach links und rechts von x ist, befindet sich der Maus-Click im Quadrat. Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus if (e.pageX < x canvas.offsetLeft && e.pageX > x canvas.offsetLeft && e.pageY < y canvas.offsetTop && e.pageY > y canvas.offsetTop) Ähnlich testet man die y-Koordinate ab. Wenn man den Mittelpunkt auf (x,y) setzt, ist die Bewegung des Quadrats einfach: (x,y) to (e.pageX-canvas5.offsetLeft, e.pageY-canvas5.offsetTop) x = e.pageX - canvas5.offsetLeft; y = e.pageY - canvas5.offsetTop; dragok = true; Autor: H.Sporenberg

Bewegen eines Rechtecks – mit der Maus if (e.pageX < x canvas.offsetLeft && e.pageX > x canvas.offsetLeft && e.pageY < y canvas.offsetTop && e.pageY > y canvas.offsetTop) Hier ist die Funktion: myMove() function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } Autor: H.Sporenberg

Autor: H.Sporenberg

Geolocation Mit der neuen Javascript Geolocation API kann der Standort des Besuchers ziemlich genau ermittelt werden. Datenschutz: Die Sicherheitsbestimmungen des W3C sehen ausdrücklich vor, dass der Besucher der Seite gefragt werden muss, bevor der Browser seinen Standort ermitteln darf. Also: Ohne ausdrückliche Zustimmung des Nutzers gibt es keine Positionsdaten. User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below So sieht die Geolocation-Sicherheitsabfrage in Chrome aus Autor: H.Sporenberg

Geolocation Mit der neuen Javascript Geolocation API kann der Standort des Besuchers ziemlich genau ermittelt werden. Datenschutz: Die Sicherheitsbestimmungen des W3C sehen ausdrücklich vor, dass der Besucher der Seite gefragt werden muss, bevor der Browser seinen Standort ermitteln darf. Also: Ohne ausdrückliche Zustimmung des Nutzers gibt es keine Positionsdaten. Verschiedene Methoden zur Bestimmung des Standorts 1.GPS-Sender – die am meisten benutzte Methode. Viele moderne Smartphones haben einen GPS-Sensor standardmäßig. GPS-geolocation erkennt das Signal von einer Anzahl von Satelliten, typischerweise vier oder mehr. Es wird eine mathematische Berechnungsmethode, die sog. Trilateration, benutzt, um auf grund der unterschiedlichen Zeiten zu den Satellitensignalen die Position zu bestimmen Autor: H.Sporenberg

Geolocation – Position mit der Geolocation API ausgeben Die wichtigsten Ausgabeformate sind Latitude (= Breitengrad) und Longitude (= Längengrad) <html lang="de"> <head> <meta charset="utf-8"/> <title>HTML5 Geolocation Beispiel</title> </head> <body> (7) <div id="pos">Deine Position wird ermittelt...</div> <script> (9) navigator.geolocation.getCurrentPosition(function(position){ (10) (document.getElementById('pos').innerHTML = 'Latitude: '+position.coords.latitude+' / Longitude: '+position.coords.longitude;}, function(){ (13) document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';}); </script> </body></html> Autor: H.Sporenberg

Geolocation – Position mit der Geolocation API ausgeben Zeile 7: Hier wird ein div-Container erstellt mit der ID pos, der nach Überprüfung der Position eine Fehlermeldung oder die Koordinaten von Latitude und Longitude ausgibt. Zeile 9: Hier wird die Funktion getCurrentPosition() des geolocation-Objekts benutzt, die in den meisten Fällen zwei Callback-Funktionen als Parameter erwartet. Die erste Callback-Funktion wird im Erfolgsfall aufgerufen und beinhaltet das position-Objekt, das wiederum die Koordinaten-Informationen enthält. Der zweite Callback wird im Fehlerfall aufgerufen und beinhaltet ein Javascript-Objekt mit Informationen zum Fehler Autor: H.Sporenberg

Geolocation – Position mit der Geolocation API ausgeben Zeile 10: Der Erfolgs-Callback liefert das Objekt position zurück, welches wiederum zwei Kinder hat. Das sind einmal das timestamp (position.timestamp) – der Zeitpunkt zu dem die Position ermittelt wurde und zum anderen coords (position.coords), wiederum ein eigenes Objekt, in dem die Positionsinformationen versteckt sind. Das Objekt position.coords beinhaltet die Variablen latitude, longitude, altitude (=Höhe), accuracy (=Genauigkeit), alitudeAccuracy (=Genauigkeit Höhe), heading (=Richtung), speed (=Geschwindigkeit). Hier sollen nur die beiden Variablen latitude und longitude mit der ID pos mit Hilfe von document.getElementById() in diesem Container ausgegeben werden. Zeile 13: Im Fehler-Callback wird keine explizite Analyse des Fehler durchgeführt. Es wird lediglich eine allgemein gültige Fehlermeldung ausgegeben. Autor: H.Sporenberg

Geolocation – zusätzliche Ausgabe von GoogleMaps Die Angabe der Position in Längen- und Breitenkreis kann ergänzt werden, mit der Ansicht des Ortes auf einer Karte von GoogleMaps mit einem Symbol an der betreffenden Stelle. <html lang="de"> <head><meta charset="utf-8"/> <title>HTML5 Geolocation Beispiel mit Hilfe von Google Maps</title> <script src=" </head> <body><div id="pos" style="width:800px; height:600px;">Deine Position wird ermittelt...</div> <script> function initialize(coords) { var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); var myOptions = {zoom: 8,center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("pos"), myOptions); var marker = new google.maps.Marker({ position: latlng,map: map,title: "Hier bist du :)"});} navigator.geolocation.getCurrentPosition(function(position){initialize(position.coords);}, function(){document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';}); </script></body></html> Autor: H.Sporenberg

Geolocation – zusätzliche Ausgabe von GoogleMaps 1.The HTML5 Geolocation API allows you to access the current location of the user(or atleast the location of the Device used by the user). 2.The Location consists of a pair of coordinates denoting the latitude and longitude of the subject. Eg:Coordinates for Burj Khalifa, Dubai is ( ° N, ° E) 3.Sources used by Geolocation API to determine user Location. IP Address of the User.:Finds the location of your Internet Service Provider, so not exact location. Global Positioning System(GPS): By triangulating the location based on signals from GPS satellites orbiting the earth. Cell Phone ID.: By triangluation of location based on distance from cell towers Wi Fi Location.: By traingulating the location based from distance from WiFi access points Address.: By using the Address, Zip Code, street name etc, so not accurate. Autor: H.Sporenberg

Geolocation – zusätzliche Ausgabe von GoogleMaps <html lang="de"> <head> <meta charset="utf-8"/> <title>HTML5 Geolocation Beispiel mit Hilfe von Google Maps</title> (4) <script src=" <body> (6) <div id="pos" style="width:800px; height:600px;"> Deine Position wird ermittelt </div> <script> (9) function initialize(coords) { (10) var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); (11) var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; (12) var map = new google.maps.Map(document.getElementById("pos"), myOptions); (13) var marker = new google.maps.Marker({ (14) position: latlng, (15) map: map, (16) title: "Hier bist du :)" (17) }); } navigator.geolocation.getCurrentPosition(function(position) (19) { initialize(position.coords); (20) }, function(){ document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden'; }); </script> </body></html> Autor: H.Sporenberg

Geolocation – zusätzliche Ausgabe von GoogleMaps Zeile 4: Hier wird die neueste Version der Google Maps Javascript-API eingebunden Zeile 6: Damit der Container (=div) pos später die Google Maps Karte anzeigen kann, benötigt er eine Breite und Höhe. Zeile 19: Anstatt die Koordinaten direkt auszugeben, wird das coords-Objekt nach Ermittlung der Position direkt an die Funktion initialize übergeben. Zeile 9: Hier wird die Javascript-Funktion initialize() geöffnet, die als Parameter das coords-Objekt erwartet. Zeile 10: Die Google Maps API V3 arbeitet mit Koordinaten-Objekten zur Positionsbestimmung. Ein eben solches wird in dieser Zeile mit den in den im coords-Objekt übergebenen Breiten- und Längengraden erstellt. Zur Weiterverarbeitung wird das Objekt in der Variablen latlng gespeichert. Zeile 11: Es wird noch ein Objekt benötigt, um die Karte zu initialisieren. Innerhalb von myOptions wird die Zoomstufe der Karte (zoom), der Mittelpunkt der Karte (center) und der Karten-Typ (mapTypeld) definiert. Autor: H.Sporenberg

Geolocation – zusätzliche Ausgabe von GoogleMaps Zeile 12: Hier wird die GoogleMaps Karte in den Container mit der ID pos geladen und die eben definierten Einstellungen aus dem myOptions-Objekt übergeben. Danach wird das Ergebnis zur Weiterverarbeitung in der Variablen map gespeichert. Zeile 13-17: Zwar wurde die Karte auf die aktuelle Position zentriert, aber da die Angabe genau sein soll, wird noch ein Symbol benötigt, das die exakte Position auf der Karte anzeigt. Für solche Markierungen stellt Google Maps API die Marker()-Funktion zur Verfügung. Diese erwartet als Parameter ein Objekt. In dieem Beispiel wird erneut über die latlng-Variable die Position der Markierung (position), die Karte, auf die der Marker überhaupt gesetzt werden soll (map) und den Titel (title), der beim Überfahren des Symbols mit der Maus angezeigt wird, definiert. Autor: H.Sporenberg

Bewegen einer Fläche mit den Pfeiltasten function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10);} Um auf der canvas-Fläche zu zeichnen, muss eine Referenz zum canvas-Element hergestellt werden. Die draw-Funktion ist der zentrale Punkt des Programms: function draw() { clear(); ctx.fillStyle = "white"; ctx.strokeStyle="black"; rect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "red"; circle(x,y,10);} Mit Hilfe der Funktion clear() wird die canvas-Fläche gelöscht, mit fillStyle und strokeStyle werden die Farben der canvas-Fläche neu gesetzt. Autor: H.Sporenberg

Bewegen einer Fläche mit den Pfeiltasten function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); ctx.stroke();} Die fill-Methode färbt die canvas-Fläche mit der entsprechenden Farbe ein, die stroke-Methode zeichnet den Rand mit der eingestellten Farbe. function circle(x,y,r){ ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2,true); ctx.fill();} Dann wird in der draw-Funktion circle aufgerufen. Der Kreis wird entsprechend gezeichnet. Autor: H.Sporenberg

Bewegen einer Fläche mit den Pfeiltasten window.addEventListener('keydown',doKeyDown,true); Der addEventListener wird im Windows-Fenster aufgerufen. Der Typ ist keydown und erscheint, wenn irgendeine Taste gedrückt wird. Der Listener ist die doKeyDown()-Funktion und useCapture ist true. Wenn eine Taste gedrückt wird, wird die doKeyDown()- Funktion aufgerufen. function circle(x,y,r){ ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2,true); ctx.fill();} Autor: H.Sporenberg

JavaScript Events Events« – Ereignisse – passieren auf einer Webseite mit dem Beginn des Ladeprozesses der Webseiten (das Laden selbst ist schon ein Event) über Scrollen, Mausbewegung, Drücken einer Taste der Tastatur bis hin zum Verlassen der Webseite. Solange eine Webseite im Browserfenster geladen ist, passieren unzählige Events. Das Erkennen dieser Events ist in Javascript schon fertig vorprogrammiert. Events werden über ein Schlüsselwort angesprochen. Die Schlüsselwörter für Events sind klein geschriebene Wörter, die mit »on« beginnen wie onclick, onmouseover, onkeypress … D:\Sporenberg\HTML5\Javascript events • Ereignisse und Event Handler.htm Autor: H.Sporenberg

JavaScript Events Um eine Ereignissteuerung in Gang zu setzen, sind nur wenige Zutaten nötig: Fast alle HTML-Tags können ein Ereignis wie ein mouseover an einen Javascript Event Handler melden. Eingabefelder von Formularen merken, wenn eine Taste gedrückt und losgelassen wurde. Registrare sind die Instanzen, bei denen die Ereignisse für ein HTML-Element angemeldet werden. Im einfachsten Fall ist der Javascript-Befehl wie window.onload oder mydiv.mouseover der Registrar, bei dem ein Event angemeldet wird. Der flexibelste Registrar ist die Javascript-Funktion addEventListener, der in den älteren Version von Internet Explorer aber noch attachEvent heißt. Der Javascript-Programmierer steuert die Anweisungen bei, die beim Eintreten des Events ausgeführt werden: Diese Anweisungen sind die Event-Handler. Autor: H.Sporenberg

Spiralen 1. Die Archimedische Spirale Eine archimedische Spirale ist die Bahn eines Punktes, der sich auf einem mit konstanter Winkelgeschwindigkeit 0 rotierenden Halbstrahl mit konstanter Geschwindigkeit v0 nach außen bewegt. Insbesondere sind bei der archimedischen Spirale die Abstände der Windungen konstant. Im Alltag tritt die archimedische Spirale häufig dort auf, wo etwas ordentlich aufgewickelt ist (Seile, Toilettenpapier), oder etwas Linienförmiges eine Fläche bilden soll (Lakritzspirale, Schallplattenrillen). Insbesondere kommt sie auf jedem handelsüblichen Datenträger (CD oder DVD) zur Anwendung. Auf einer CD werden die Daten in Form von kleinen Vertiefungen beginnend bei der innersten Spur der CD spiralartig nach außen geschrieben. Autor: H.Sporenberg

Spiralen 1. Die Archimedische Spirale Die Parameterform der Archimedischen Spirale lautet: f:   (a  cos , a  sin ) Polargleichung: r() = a  Autor: H.Sporenberg

Spiralen 1. Die Archimedische Spirale function draw(){ var canvas = document.getElementById("testcanvas"); var context = canvas.getContext("2d"); var radius = 0; var angle = 0; var radius = 4; context.lineWidth = 10; context.strokeStyle = "#cd8500"; context.beginPath(); context.moveTo(testcanvas.width / 2, testcanvas.height / 2); for (var n = 0; n < 300; n++) { // make a complete circle every 50 iterations angle += (Math.PI * 2) / 50; var x = testcanvas.width / 2 + radius * angle* Math.cos(angle); var y = testcanvas.height / 2 + radius * angle* Math.sin(angle); context.lineTo(x, y); context.stroke(); } ; }; Mit diesem Programm erscheint das Bild der Spirale ohne Verzögerung. Autor: H.Sporenberg

Spiralen 1. Die Archimedische Spirale Mit Hilfe einer Rekursion kann der Verlauf der Spirale aber auch als Animation dargestellt werden. function drawCanvas(){ var canvas = document.getElementById("testcanvas"); if(canvas.getContext){ var context = canvas.getContext('2d'); context.lineWidth = 8; context.strokeStyle = "#EEAD0E";// blue-ish color context.beginPath(); context.moveTo(testcanvas.width / 2, testcanvas.height / 2); animate(context, 5, 0,0);} } function animate(context,constante,winkel,zaehler){ setTimeout(function(){ (*) var x = testcanvas.width / 2 + constante *winkel* Math.cos(winkel); (**) var y = testcanvas.height / 2 + constante *winkel* Math.sin(winkel); context.lineTo(x, y); context.stroke(); zaehler=zaehler+1; winkel=winkel+(Math.PI * 2) / 50; if (zaehler>300) {exit()}; self.animate(context,constante, winkel,zaehler);}, 2); } Autor: H.Sporenberg

Spiralen 1. Die Archimedische Spirale Damit die Spirale in der Mitte der Canvas-Fläche gezeichnet wird, muss zu jeder Koordinate die Hälfte der Breite und der Höhe zu der jeweiligen x- und y-Koordinate addiert werden (Zeilen (*) und (**) im Programmcode auf der vorherigen Folie) . Autor: H.Sporenberg

Spiralen 2. Die Logarithmische Spirale Eine Logarithmische Spirale ist eine Spirale, bei der sich mit jeder Umdrehung um ihren Mittelpunkt (Zentrum, Pol) der Abstand von diesem Mittelpunkt um den gleichen Faktor verändert. Jede Gerade durch den Pol schneidet die logarithmische Spirale stets unter dem gleichen Winkel. Wegen dieser Eigenschaft spricht man auch von einer gleichwinkligen Spirale. Die Parameterform der logarithmischen Spirale lautet: f:   (r0 e a  cos , r0 e a  sin ) Die Polargleichung lautet: r() = r0 e a r0 ist der Radius eines Anfangspunktes auf der Polarachse. Autor: H.Sporenberg

Spiralen 2. Die Logarithmische Spirale Mit Hilfe einer Rekursion kann der Verlauf der Spirale aber auch als Animation dargestellt werden. function drawCanvas(){ var canvas = document.getElementById("testcanvas"); if(canvas.getContext){var context = canvas.getContext('2d'); context.lineWidth = 2; context.strokeStyle = "#EEAD0E"; context.beginPath(); animate(context, 0.8, 0.15,0,0); } } function animate(context,k1,k2,winkel,zaehler){ setTimeout(function(){ var x = testcanvas.width/2 + k1*Math.pow(2.712,k2*winkel)*Math.cos(winkel); var y = testcanvas.height/2 + k1*Math.pow(2.712,k2*winkel)*Math.sin(winkel); context.lineTo(x, y); context.stroke(); zaehler=zaehler+1; winkel=winkel+(Math.PI * 2) / 50; if (zaehler>300) {exit()}; self.animate(context,k1,k2, winkel,zaehler);}, 2); } Autor: H.Sporenberg

Spiralen 2. Die Logarithmische Spirale Autor: H.Sporenberg

Spiralen 3. Die Fermatsche Spirale Durch leichte Variation der Gleichung der Archimedischen Spirale erhält man Spiralklassen, bei denen der Windungsabstand nicht mehr konstant ist. Erhöht man den Grad von r (und a), so liegen die Windungen mit größerer Entfernung vom Zentrum immer dichter beieinander. Die Parametergleichung lautet: Autor: H.Sporenberg

Spiralen 3. Die Fermatsche Spirale function drawCanvas(){ var canvas = document.getElementById("testcanvas"); if(canvas.getContext){var context = canvas.getContext('2d'); context.lineWidth = 5; context.strokeStyle = "#EEAD0E"; context.beginPath(); animate(context, 600,0,0); } } function animate(context,k1,winkel,zaehler){ setTimeout(function(){ var x = testcanvas.width / 2 + Math.sqrt(k1*winkel)* Math.cos(winkel); var y = testcanvas.height / 2 + Math.sqrt(k1*winkel)* Math.sin(winkel); context.lineTo(x, y); context.stroke(); zaehler=zaehler+1; winkel=winkel+(Math.PI * 2) / 100; if (zaehler>600) {exit()}; self.animate(context,k1, winkel,zaehler); }, 2); } Autor: H.Sporenberg

Spiralen 3. Die Fermatsche Spirale Autor: H.Sporenberg

Die mathematischen Funktionen Mit dem Objekt Math können Berechnungen durchgeführt werden, auch komplexe wissenschaftlicher oder kaufmännischer Art. Dazu stehen verschiedene Methoden und Funktionen sowie einige Eigenschaften zur Verfügung. Eine Instanz von Math braucht nicht eigens erzeugt zu werden. Die Eigenschaften und Methoden von Math können direkt verwendet werden. Schema: x= Math.Eigenschaften; X = Math.Methoden (); Autor: H.Sporenberg

Die mathematischen Funktionen - Eigenschaften
JavaScript - Einführung Die mathematischen Funktionen - Eigenschaften Math.E  Die Eulersche Zahl e  2,718 Math.LN2  Der natürliche Logarithmus von 2  0,693 Math.LN10  Der natürliche Logarithmus von 10  2,302 Math.LOG2E  Der Logarithmus der Eulerschen Zahl e zur Basis 2  1,442 Math.PI  Die Zahl   3,14159 Math.SQRT1_2  Wurzel aus 1/2  0,707 Math.SQRT2  Wurzel aus 2  1,414 Autor: H.Sporenberg

Die mathematischen Funktionen - Methoden
JavaScript - Einführung Die mathematischen Funktionen - Methoden Math.abs(Zahl)  Der Absolutbetrag der Zahl  Zahl=-1 ergibt 1 Math.acos(Zahl)  Liefert den Arcuscosinus der Zahl in Bogenmaß. Achtung: -1  Zahl  1. Math.asin(Zahl)  Liefert den Arcussinus der Zahl in Bogenmaß. Math.atan(Zahl)  Liefert den Arcustangens der Zahl in Bogenmaß. Math.ceil(Zahl)  Liefert die nächsthöhere Ganzzahl dieser Zahl zurück. Wenn die übergebene Zahl eine Ganzzahl ist, bleibt sie unverändert. Math.cos(Zahl)  Liefert den Cosinus der Zahl zurück (Achtung: Eingabe des Winkels in Bogenmaß) Math.exp(Zahl)  Liefert eZahl zurück Math.floor(Zahl)  Liefert die nächstniedrigere Ganzzahl dieser Zahl zurück. Wenn die übergebene Zahl eine Ganzzahl ist, bleibt sie unverändert Autor: H.Sporenberg

Die mathematischen Funktionen - Methoden
JavaScript - Einführung Die mathematischen Funktionen - Methoden Math.log(Zahl)  Der natürliche Logarithmus von Zahl  Achtung: Zahl > 0 Math.max(Zahl1,Zahl2)  Ausgegeben wird die größere der beiden Zahlen Math.min(Zahl1,Zahl2)  Ausgegeben wird die kleinere der beiden Zahlen Math.pow(Basis,Exponent)  Ausgegeben wird BasisExponent. Math.random(Zahl)  Liefert eine Zufallszahl zwischen 0 und 1. Math.round(Zahl)  Liefert die mathematisch korrekt gerundete Zahl Math.sin(Winkel)  Liefert den Sinus zurück. Achtung: Winkel in Bogenmaß Math.sqrt(Zahl)  Liefert die Wurzel aus Zahl. Achtung: Zahl > 0 Math.tan(Winkel)  Liefert den Tangens zurück. Achtung: Winkel in Bogenmaß Autor: H.Sporenberg

4. MINT-Tagung Workshop 14.45 Uhr am 5.März 2014
HTML5-Programmierung in der Mittelstufe Heinz Sporenberg/ASGSG-Marl Autor: H.Sporenberg

HTML5 video/audio Mit HTML5 video bzw. audio lassen sich mehrere Varianten eines Videos bzw. einer Audio-Datei einbinden. Die Browser unterstützen unterschiedliche Video-Formate: Firefox und Chrome spielen OGV-Video, Safari, Chrome und Internet Explorer 9 spielen MP4-Video. Für den Besucher, der mit dem Handy unterwegs ist, benötigt man ein Video mit reduzierter Datenrate. Das video-Tag in HTML5 soll den Umgang mit den unterschiedlichen Video-Formaten und -Codecs vereinfachen. Zwischen dem öffnenden und schließenden Video-Tag können alternative Formate eines Videos eingesetzt werden, z.B. MP4 und OGG Autor: H.Sporenberg

HTML5 video/audio <video controls height="360" width="640">
<source src="extracting.m4v" type="video/mp4" /> <source src="extracting.mp4" type="video/mp4" /> <source src="extracting.ogv" type="video/ogg" /> <p>Dieser Browser unterstützt HTML5 Video nicht</p> </video> Das Video kann in mehreren Formaten vorliegen – eine zwei- oder sogar dreifache Transcodierung des Videos ist nichts Ungewöhnliches. Die hier angeführten Formate sind OGG für Firefox und Google Chrome (der dann aber doch noch immer mp4 den Vorzug gibt), MP4 für Internet Explorer 9 und Safari. M4V ist das Format für iPad und iPhone. Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation
Das neue Element canvas stellt vier Methoden zur Manipulation von Bildern zur Verfügung. Dieses sind: 1.drawImage() 2.getImageData() 3.putImageData() 4.createImageData Mit der Methode drawImage() wird ein Bild in die canvas gezeichnet. Diese Methode kann mit drei, fünf oder neun Argumenten aufgerufen werden. Bei allen Aufrufen ist aber das erste Argument die Bildquelle. 1.drawImage(image, x, y) mit drei Argumenten: Das 2. und 3. Argument gibt jeweils die x- und y-Koordinate an, an denen die linke obere Ecke des Bildes gezeichnet wird. Bei dieser Aufrufmethode wird die gesamte canvas kopiert. Die x- und y-Koordinaten beziehen sich auf das aktuelle Koordinatensystem. Autor: H.Sporenberg

1.drawImage() mit drei Argumenten: function draw() { var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); var Bild = new Image(); Bild.src = "Yosemite_04_01.jpg"; context.beginPath(); context.drawImage(Bild,100,10); context.fillStyle="#CC00FF"; context.font="30px verdana"; context.fillText("Yosemite", 240, 370); context.closePath(); } <body onload="draw()"> <canvas id="testcanvas" width="600" height="400"></canvas> </body> Autor: H.Sporenberg

Datei: Images_Manipulan_Yosemite.html
HTML5 Bild- und Pixelmanipulation 1.drawImage() mit drei Argumenten: Autor: H.Sporenberg Datei: Images_Manipulan_Yosemite.html

2.drawImage(image, x, y, dx, dy) mit fünf Argumenten: Die Argumente x, y, dx und dy definieren das Zielrechteck in der Canvas. Das gesamte Bild wird in das Rechteck auf der Canvas mit dem linken obe-ren Punkt (OL(x/y)) und dem rechten unteren Punkt UR(dx/dy)) kopiert. Hier kann es natürlich zur verzerrten Darstellung des Bildes kommen, wenn das Verhältnis von Breite und Länge auf der Canvas nicht mit dem Ver-hältnis von Breite und Länge des dargestellten Bildes übereinstimmt. Dargestellt wird immer das komplette Bild. function draw() { var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); var Bild = new Image(); Bild.src = "Yosemite_04_01.jpg"; context.beginPath(); context.drawImage(Bild,30,70,200,300); context.fillStyle="#CC00FF"; context.lineStyle="#ff00"; context.font="30px verdana"; context.fillText("Yosemite", 50, 410); context.closePath(); } Autor: H.Sporenberg

Datei: Images_Manipulan_Yosemite_05.html
HTML5 Bild- und Pixelmanipulation 2.drawImage(image, x, y, dx, dy) mit fünf Argumenten: Datei: Images_Manipulan_Yosemite_05.html <body onload="draw()"> <canvas id="testcanvas" width="600" height="400"></canvas> </body> Autor: H.Sporenberg

3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) Der drawImage()-Aufruf mit neun Argumenten gibt sowohl ein Quellrechteck als auch ein Zielrechteck an und kopiert nur die Pixel im Quellrechteck. Die Argumente zwei bis fünf spezifizieren das Quellrechteck und werden in CSS-Pixeln angegeben. Die Argumente sechs bis neun geben das Zielrechteck an, in das das Bild gezeichnet wird, und diese beziehen sich auf das aktuelle Koordinatensystem des Canvas. Autor: H.Sporenberg

3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) function draw() { var canvas = document.getElementById("canvas1"); var context = canvas.getContext('2d'); var Bild = new Image(); Bild.src = "Yosemite_03_01.jpg"; context.drawImage(Bild,150,10,300,200,200,100,200,200); } ….. <body onload="draw()"> <canvas id="canvas1" width="800" height="600"></canvas> </body> Auch hier kann es zu Verzerrungen des Bildes kommen. Das Verhältnis von sw und sw muss genauso groß sein wie das Verhältnis von dw und dh. Im angegebenen Fall ist sw=300, sh=200 -> Verhältnis: sw/sh = 3/2 = 1,5 – dw = 200, dh = 200 -> Verhältnis: dw/dh = 1. Also leichte Verzerrung. Autor: H.Sporenberg

Datei: Images_Manipulation_Yosemite_03.html
HTML5 Bild- und Pixelmanipulation 3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) Autor: H.Sporenberg Datei: Images_Manipulation_Yosemite_03.html

Datei: Huber_Yosemite.html
HTML5 Bild- und Pixelmanipulation Collage mehrerer Bilder function draw() { var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); var Bild1 = new Image(); Bild1.src = "El_Capitan_03_01.jpg"; var Bild2 = new Image(); Bild2.src = "Huber_Alex_Thomas_02_02.jpg"; var Bild3 = new Image(); Bild3.src = "Schriftzug_01.jpg"; var Bild4 = new Image(); Bild4.src = "Schriftzug_03.jpg"; context.beginPath(); context.drawImage(Bild1,10,10); context.drawImage(Bild2,463,10); context.drawImage(Bild3,463,149); context.drawImage(Bild4,10,350); context.closePath(); } Mit Hilfe der drawImage()-Methode können natürlich auch mehrere Bilder zusammengefügt werden. Mit Hilfe der Pixelgröße der Bilder müssen die benötigten Abstände berechnet und dann in der drawImage()-Methode verwendet werden. Autor: H.Sporenberg Datei: Huber_Yosemite.html

Collage mehrerer Bilder Autor: H.Sporenberg

2.getImageData() var ImageData = context.getImageData(0,0,canvas.width,canvas.height) Das ImageData-Objekt besitzt die Attribute ImageData.width, ImageData.height und ImageData.data. Im Attribut ImageData.data verbergen sich die einzelnen Pixelwerte im sog. CanvasPixelArray. Dieses sind die Werte für Rot, Grün, Blau und Alpha. Beispiel: ImageData.data[1] = 255; ImageData.data[2]=0; ImageData.data[3] = 0; ImageData.data[4] = 255; Durch diese 4 Werte ist die Farbe des ersten Pixels (oben links) definiert. Die Farbe ist (255,0,0) – also rot, alpha ist 255 – also nicht durchscheinend. Für jeden Farbwert der einzelnen Pixel benötigt man also vier Array-Elemente, beginnend von links nach rechts und dann von oben nach unten Autor: H.Sporenberg

2.getImageData() Im folgenden Beispiel werde mit Hilfe von contextfillRect(x,y,xWidth,yHeight) vier verschiedenfarbige Quadrate gezeichnet. 3.putImageData() context.putImageData(ImageData,dx,dy) Das Argument ImageData beinhaltet die Farbwerte der ausgelesenen Pixel durch getImageData(). Diese Pixelwerte können aber auch durch Zuweisungen verändert und dann mit putImageData() ausgegeben werden. Autor: H.Sporenberg

2.getImageData() und 3. putImageData() Die Werte werden ausgelesen und an anderer Stelle der Canvas modifiziert ausgegeben. In diesem Fall wird die Durchlässigkeit (alpha-Wert -> 4.Wert im Array) verändert. function draw() { var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); context.fillStyle="navy"; context.fillRect(0,10,100,100); context.fillStyle="teal"; context.fillRect(100,10,100,100); context.fillStyle="lime"; context.fillRect(0,110,100,100); context.fillStyle="yellow"; context.fillRect(100,110,100,100); var ImageData = context.getImageData(0,10,200,200); for (var i=0;i<ImageData.data.length;i+=4){ ImageData.data[i+3] = 120; }; context.putImageData(ImageData,10,400); Autor: H.Sporenberg

2.getImageData() und 3.putImageData() Autor: H.Sporenberg

2.getImageData() und 3. putImageData() Man kann jetzt beliebige Bereiche gezielt farblich verändern. Als Beispiel soll jetzt die rote Komponente mit Hilfe einer Zufallszahl verändert werden. Die anderen Werte für g (=green), b(=blau) und alpha bleiben erhalten. for (var i=0;i<ImageData.data.length;i+=4){ ImageData.data[i] = parseInt(Math.random()*255); }; context.putImageData(ImageData,10,400); Mit Hilfe von Math.random() wird eine Pseudozufallszahl zwischen 0 und 1 erzeugt. Diese wird dann mit 255 multipliziert und man erhält so Kommazahlen zwischen 0 und 255. Die Werte für die Angabe im rgb-Modus müssen aber ganzzahlige Werte sein. Dieses bewirkt die Funktion parseInt. Mit dieser Funktion werden die Nachkommastellen abgeschnitten und man erhält eine ganze Zahl. Beispiel: parseInt( ) ergibt 245. Autor: H.Sporenberg

2.getImageData() und 3. putImageData() Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Mit Hilfe von createImageData() kann ein angegebener Bereich vorbereitet werden, um diesen Pixel für Pixel einfärben zu können. (1) function draw() { (2) var canvas = document.getElementById('canvas'); (3) var context = canvas.getContext('2d'); (4) var ImageData = context.createImageData(200,200); (5) var pixels = ImageData.data; (6) var numPixels = ImageData.width*ImageData.height; (7) for (var i = 0;i<numPixels;i++){ (8) pixels[i*4] = 255; //RED (9) pixels[i*4+1]= 0 ; // GREEN (10) pixels[i*4+2] = 255; // BLUE (11) pixels[i*4+3] = 255; // ALPHA (12) }; (13) context.putImageData(ImageData,0,0); (14) }}; In Zeile (4) wird der zu bearbeitende Bereich festgelegt. Hier ist es ein Quadrat mit 200 Pixeln. In Zeile (5) wird das PixelArray vereinbart, so dass man auf jedes einzelne Pixel mit der Variablen pixels zugreifen kann. In numPixels wird die Anzahl der Pixel berechnet. Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Mit Hilfe von createImageData() kann ein angegebener (virtueller) Bereich Pixel für Pixel eingefärbt werden. In der For-Schleife (Zeile (7) bis Zeile(12)) werden allen Pixeln Farbwerte und der alpha-Wert 255 zugewiesen. Die Werte (255,0,255) ergeben einen pinkfarbenen Farbwert. In Zeile (13) wird der bearbeitet Bereich ausgegeben. (1) function draw() { (2) var canvas = document.getElementById('canvas'); (3) var context = canvas.getContext('2d'); (4) var ImageData = context.createImageData(200,200); (5) var pixels = ImageData.data; (6) var numPixels = ImageData.width*ImageData.height; (7) for (var i = 0;i<numPixels;i++){ (8) pixels[i*4] = 255; //RED (9) pixels[i*4+1]= 0 ; // GREEN (10) pixels[i*4+2] = 255; // BLUE (11) pixels[i*4+3] = 255; // ALPHA (12) }; (13) context.putImageData(ImageData,0,0); (14) }}; Achtung: Bei create muss der alpha-Variablen immer ein Wert zugewiesen werden. Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Im Extremfall wäre es möglich jeden einzelnen Pixel mit unterschiedlichen Farben einzufärben. Die verschiedenen Farbanteile des rgb-Modells können z.B. durch eine Zufallsfunktion bestimmt werden. (1) function draw() { (2) var canvas = document.getElementById('canvas'); (3) var context = canvas.getContext('2d'); (4) var ImageData = context.createImageData(200,200); (5) var pixels = ImageData.data; (6) var numPixels = ImageData.width*ImageData.height; (7) for (var i = 0;i<numPixels;i++){ (8) pixels[i*4] = parseInt(random()*255); //Rot-Anteil (9) pixels[i*4+1]= parseInt(random()*255); // Grün-Anteil (10) pixels[i*4+2] = parseInt(random()*255); //Blau-Anteil (11) pixels[i*4+3] = 255; // ALPHA-Wert (12) }; (13) context.putImageData(ImageData,0,0); (14) }}; Achtung: Bei createImageData muss der alpha-Variablen immer ein Wert zugewiesen werden. Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Autor: H.Sporenberg Jeder Punkt erhält eine zufällig erzeugten Farbenwert.

Datei: Pixel_Manipulation_04_01.html
HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Die Deutschlandflagge hat 3 rechteckige Bereiche mit unterschiedlichen Farben (Schwarz – rot –gold). Die unterschiedlichen Farbbereiche können mit Hilfe dreier For-Schleifen entsprechend eingefärbt werden. Die Größe der Fahne wird mit var ImageData = context.createImageData(300,210); vorgegeben. Man hat also 300*210 = Pixel. Jeder Bereich umfasst demnach 63000/3 = Pixel. Autor: H.Sporenberg Datei: Pixel_Manipulation_04_01.html

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Der Quellcode function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var ImageData = context.createImageData(300,210); var pixels = ImageData.data; var numPixels = ImageData.width*ImageData.height; for (var i = 0;i<21000;i++){ pixels[i*4] = 0; //RED pixels[i*4+1]= 0 ; // GREEN pixels[i*4+2] = 0; // BLUE pixels[i*4+3] = 255; // ALPHA }; for (var i = 21000;i<2*21000;i++){ pixels[i*4] = 255; //RED pixels[i*4+1]= 0 ; // GREEN pixels[i*4+2] = 0; // BLUE pixels[i*4+3] = 255; // ALPHA }; for (var i = 42000;i<63000;i++){ pixels[i*4+1]= 210; // GREEN context.putImageData(ImageData,50,50); Datei: Pixel_Manipulation_04_01.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Ein wenig komplizierter wird es, wenn man Flaggen erzeugen will, die senkrechte Farbstreifen haben wie z.B. die französische Flagge. Wir gehen wieder von einem 300*210-Pixel großem Feld aus. Die ersten Pixelwerte sind 0, 1, 2, ….100 in der waagrechten. Der nächste Pixelwert ist 301, 302, … 400. Die letzte Reihe beginnt mit 62601, Dazu benötigen wir eine umfassende Schleife, die jeweils 100-mal durchlaufen wird (Zählvariable ist i). Dann benötigt man eine weitere Zählvariable j, die 210 mal aufgerufen wird (210 Pixel in der senkrechten). In der inneren Schleife benötigt man jedoch eine weitere Variable k, die jeweils von 0 bis 100, dann von 301 bis 400 usw. zählt. Wird die innere Schleife (j) verlassen, muss die Variable k um 300 erhöht werden. So erreicht man den oberen Pixel der nächsten senkrechten Reihe. Datei: Pixel_Manipulation_04_06.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var ImageData = context.createImageData(300,210); var pixels = ImageData.data; var numPixels = ImageData.width*ImageData.height; var k=0; for (var i = 0;i<100;i=i+1){ for (var j=0;j<210;j=j+1){ pixels[k*4] = 0; //RED pixels[k*4+1]= 0 ; // GREEN pixels[k*4+2] = 255; // BLUE pixels[k*4+3] = 255; // ALPHA k = k+300; }; k = i;}; Datei: Pixel_Manipulation_04_05.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Fortsetzung var k=199; for (var i = 0;i<100;i=i+1){ for (var j=0;j<210;j=j+1){ pixels[k*4] = 255; pixels[k*4+1]= 0 ; pixels[k*4+2] = 0; pixels[k*4+3] = 255; k = k+300; }; k = i+200;}; context.putImageData(ImageData,50,50); context.lineWidth = "4"; context.strokeStyle = "#898989"; context.strokeRect(50,50,300, 210); var k=99; for (var i = 0;i<100;i=i+1){ for (var j=0;j<210;j=j+1){ pixels[k*4] = 255; pixels[k*4+1]= 255; pixels[k*4+2] = 255; pixels[k*4+3] = 255; k = k+300; }; k = i+100; In den letzten drei Zeilen des Codes wird um die drei Farben ein graues Rechteck gezeichnet. Datei: Pixel_Manipulation_04_05.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Datei: Pixel_Manipulation_04_05.html Autor: H.Sporenberg

Datei: Pixel_Manipulation_06.html
HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben (1) function draw() { (2) var canvas = document.getElementById('canvas'); (3) var context = canvas.getContext('2d'); (4) var imageData = context.createImageData(500,500); (5) var pixels = imageData.data; (6) var numTileRows = 4; (7) var numTileCols = 4; (8) // Groesse jedes Flaechenteils (9) var tileWidth = imageData.width/numTileCols; (10) var tileHeight = imageData.height/numTileRows; In den beiden Zeilen (6) und (7) werden die Teilung in x-Richtung (-> numTileRows) und in y-Richtung (-> numTileCols) festgelegt. Hier sind es 16 Mosaikstücke. In den beiden Zeilen (9) und (10) wird die Größe eines Flächenstücks festgelegt. Autor: H.Sporenberg Datei: Pixel_Manipulation_06.html

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben (11) for (var r = 0; r<numTileRows;r++){ (12) for (var c=0;c<numTileCols;c++){ (13) var red = Math.floor(Math.random()*255); (14) var green = Math.floor(Math.random()*255); (15) var blue = Math.floor(Math.random()*255); (16) for (var tr = 0; tr<tileHeight;tr++){ (17) for (var tc = 0; tc<tileWidth;tc++){ (18) var trueX = (c*tileWidth)+tc; (19) var trueY = (r*tileHeight)+tr; (20) var pos = (trueY*(imageData.width*4))+(trueX*4); (21) pixels[pos] = red; (22) pixels[pos+1] = green; (23) pixels[pos+2] = blue; (24) pixels[pos+3] = 255; (25) }; // Ende For-Schleife - Variable tc (26) }; // Ende For-Schleife - Variable tr (27) }; // Ende For-Schleife - Variable c (28) }; // Ende For-Schleife - Variable r (29) context.putImageData(imageData,0,0);} Autor: H.Sporenberg Datei: Pixel_Manipulation_06.html

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben Die Variable tr stellt die Pixelreihe und tc die Pixelspalte dar (Zeile 11 und 12). In diesem Beispiel mit (500,500) gibt es 4 in der Reihe und 4 in der Spalte. Jedes Flächenstück ist 125 Pixel in der Höhe und 125 Pixel in der Breite. So wird die tr-Schleife 125 mal und die tc-Schleife ebenfalls 125 mal durchlaufen. Autor: H.Sporenberg Datei: Pixel_Manipulation_06.html

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben var trueX = (c*tileWidth)+tc; var trueY = (z*tileHeight)+tr; Diese beiden Variablen berechnen die wirkliche Position der Pixel. Beispiel: Die Spalte sei die Nummer 2, dann hat die obere linke Ecke die Stelle 2*125 = 250. Zu dieser oberen linken Ecke addiert man die Spaltennummer, auf die man zugreifen will (Variable tc), z.B. 10. Dieses ergibt dann die exakte x-Position ( = 260). Dieselbe Berechnung erfolgt für die y-Koordinate. Man erhält somit die (x,y)-Koordinate des Pixels, bei dem die entsprechende Farbe zugewiesen werden soll. Also: (20) var pos = (trueY*(imageData.width*4))+(trueX*4); Autor: H.Sporenberg Datei: Pixel_Manipulation_06.html

HTML5 Bild- und Pixelmanipulation 3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben Datei: Pixel_Manipulation_06_01.html Autor: H.Sporenberg

3.putImageData() und 4. createImageData() Mosaikmuster – mit zufällig erzeugten Farben Durch Änderung der Anzahl der Mosaik-Flächen ergeben sich unterschiedliche Bilder. Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Invertierung der Farben eines Bildes (Komplementärfarben) function draw(){ var image = new Image(); var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); image.src = "Yosemite_04_01.jpg"; context.drawImage(image,0,0,image.width,image.height,0,0,context.canvas.width,context.canvas.height); var imageData= context.getImageData(0,0,canvas.width,canvas.height); var data = imageData.data; for(i=0;i<=data.length-4;i+=4){ data[i] = 255-data[i]; data[i+1] = 255-data[i+1]; data[i+2] = 255-data[i+2]; }; context.putImageData(imageData,0,0);}; Autor: H.Sporenberg Datei: Pixel_Manipulation_10_01.html

HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Invertierung der Farben eines Bildes (Komplementärfarben) for(i=0;i<=data.length-4;i+=4){ data[i] = 255-data[i]; data[i+1] = 255-data[i+1]; data[i+2] = 255-data[i+2]; }; In der For-Schleife werden die Farbwerte alle Pixel verändert. Dies geschieht dadurch, dass vom Wert 255 der aktuelle Farbwert des jeweiligen Pixels abgezogen wird. Dies geschieht für Rot, Grün und Blau. Der alpha-Wert wird nicht verändert. Danach wird das Bild mit Hilfe von putImageData() ausgegeben. Autor: H.Sporenberg Datei: Pixel_Manipulation_10_01.html

HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Invertierung der Farben eines Bildes (Komplementärfarben) Original Autor: H.Sporenberg Datei: Pixel_Manipulation_10_01.html

Datei: Pixel_Manipulation_10_Grayscale.html
HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Darstellung in Grautönen function draw(){ var image = new Image(); var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); image.src = "Yosemite_03_01.jpg"; context.drawImage(image,0,0,image.width,image.height,0,0,context.canvas.width,context.canvas.height); var imageData= context.getImageData(0,0,canvas.width,canvas.height); var data = imageData.data; for(i=0;i<=data.length-4;i+=4){ var durchschnitt = (data[i]+data[i+1]+data[i+2])/3; data[i] = durchschnitt; data[i+1] = durchschnitt; data[i+2] = durchschnitt;}; context.putImageData(imageData,0,0);}; Autor: H.Sporenberg Datei: Pixel_Manipulation_10_Grayscale.html

HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Darstellung in Grautönen for(i=0;i<=data.length-4;i+=4){ var durchschnitt = (data[i]+data[i+1]+data[i+2])/3; data[i] = durchschnitt; data[i+1] = durchschnitt; data[i+2] = durchschnitt;}; context.putImageData(imageData,0,0);}; In der For-Schleife werden die Werte für Rot, Grün und Blau von jedem Pixel ermittelt und dann durch 3 dividiert. Dieser Wert durchschnitt wird dann allen drei Farbanteilen (rgb) zugewiesen, so dass man immer einen Grauton erhält. Autor: H.Sporenberg Datei: Pixel_Manipulation_10_Grayscale.html

HTML5 Bild- und Pixelmanipulation 2.getImageData() und 3. putImageData() Darstellung in Grautönen Datei: Pixel_Manipulation_10_Grayscale.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes Ein interessanter Effekt ist, ein normales Bild so zu bearbeiten, dass dieses aus entsprechend gefärbten Rechtecken besteht und man bei genügend großer Anzahl von Rechtecken erkennen kann, was in diesem Bild dargestellt wird. In den beiden Zeilen (10) und (11) werden die Teilung in x-Richtung (-> numTileRows) und in y-Richtung (-> numTileCols) festgelegt. Hier sind es 100 rechteckige Flächenstücke. In den beiden Zeilen (13) und (14) wird die Größe eines Flächenstücks festgelegt. In den einzelnen Rechtecken werden die x- und y-Koordinaten des mittleren Pixels berechnet (Zeilen (17) und (18)) und von dieser Stelle wird dann den einzelnen rgb-Komponenten der entsprechende Farbanteil zugewiesen (Zeilen (20), (21) und (22)). Mit dieser Farbe (Zeile (23)) wird dann das entsprechende Rechteck eingefärbt. Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes (1) function draw() { (2) var canvas = document.getElementById('canvas'); (3) var context = canvas.getContext('2d'); (4) var image = new Image(); (5) image.src = "Honnold_Alex_02.jpg"; (6) context.drawImage(image,10,10); (7) var imageData = context.getImageData(0,0,canvas.width,canvas.height); (8) var pixels = imageData.data; (9) context.clearRect(0,0,canvas.width,canvas.height); (10) var numTileRows = 10; (11) var numTileCols = 10; (12) // Groesse jedes Flaechenteils (13) var tileWidth = imageData.width/numTileCols; (14) var tileHeight = imageData.height/numTileRows; Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes (15) for (var r = 0; r<numTileRows;r++){ (16) for (var c=0;c<numTileCols;c++){ (17) var x = (c*tileWidth)+(tileWidth/2); (18) var y = (r*tileHeight)+(tileHeight/2); (19) var pos = (Math.floor (y)*(imageData.width*4))+(Math.floor(x)*4); (20) var red = pixels[pos]; (21) var green = pixels[pos+1]; (22) var blue = pixels[pos+2]; (23) context.fillStyle="rgb("+red+","+green+","+blue+")"; (24) context.fillRect(x-(tileWidth/2),y-(tileHeight/2),tileWidth,tileHeight); (25) }; (26) }; (27) } Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Alexander Honnold 10x10-Rechtecke 20x20-Rechtecke Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Alexander Honnold 50x50-Rechtecke 100x100-Rechtecke Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 10x10-Rechtecke 20x20-Rechtecke Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 50x50-Rechtecke 100x100-Rechtecke Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 200x200-Rechtecke Autor: H.Sporenberg Datei: Pixel_Manipulation_12.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes mit Kreisen Die Darstellung der Verpixelung kann auch mit Hilfe von Kreisen erfolgen. Es ändert sich zum vorhergehenden Programm nur die Darstellung der gefärbten Fläche in der For-Schleife for (var r = 0; r<numTileRows;r++){ for (var c=0;c<numTileCols;c++){ var x = (c*tileWidth)+(tileWidth/2); var y = (r*tileHeight)+(tileHeight/2); var pos = (Math.floor (y)*(imageData.width*4))+(Math.floor(x)*4); var red = pixels[pos]; var green = pixels[pos+1]; var blue = pixels[pos+2]; context.beginPath(); context.arc(x,y,tileWidth/3,0,Math.PI*2,false); context.closePath(); context.fillStyle="rgb("+red+","+green+","+blue+")"; context.fill(); }; Autor: H.Sporenberg Datei: Pixel_Manipulation_13.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 10x10-Kreise 20x20-Kreise Autor: H.Sporenberg Datei: Pixel_Manipulation_13.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 50x50-Kreise 100x100-Kreise Autor: H.Sporenberg Datei: Pixel_Manipulation_13.html

HTML5 Bild- und Pixelmanipulation Verpixelung eines Bildes – Beispiel: Taft Point - Yosemite 200x200-Kreise Autor: H.Sporenberg Datei: Pixel_Manipulation_13.html

Datei: Nadelgrat_01.html
HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt In diesem Beispiel soll ein (wenn möglich Panorama) Bild in drei Teile geschnitten werden. Die beiden äußeren Teile sollen leicht gedreht um das mittlere Teilbild angeordnet werden. Als erstes werden die drei Teilbilder ausgeschnitten. Das Ergebnis wird im Array icons gespeichert. var icons = [ clipIcon(image, 0,0, 1135, 1134), clipIcon(image, 1135,0,1135, 1134), clipIcon(image, 2270,0,1135,1134) ]; Autor: H.Sporenberg Datei: Nadelgrat_01.html

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Das Zuschneiden und Anpassen der Ausschnitte erledigt die Funktion clipIcon(). In ihr wird zuerst ein neuer In-memory-Canvas mit 320 x 320 Pixeln Größe erzeugt, auf das dann mit drawImage() das entsprechend verkleinerte (oder vergrößerte) Icon kopiert und mit einem 15 Pixeln breiten, weißen Rahmen versehen wird. image.onload = function() { var clipIcon = function (img, x, y, width, height) { var cvs = document.createElement("CANVAS"); var ctx = cvs.getContext('2d'); cvs.width = 320; cvs.height = 320; ctx.drawImage(img, x, y, width, height, 0, 0, 320, 320); ctx.strokeStyle = '#FFF'; ctx.lineWidth = 15; ctx.strokeRect(0, 0, 320, 320); return cvs; }; Autor: H.Sporenberg Datei: Nadelgrat_01.html

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Für jeden dieser drei Ausschnitte wird in einem zweiten Schritt der Spiegeleffekt erzeugt und im Array effects gespeichert. var effects = []; for (var i = 0; i < icons.length; i++) { effects[i] = createReflection(icons[i]); } Die Hauptarbeit findet dabei in der Funktion createReflection() statt, deren leicht modifizierter Code einem Posting in Cha. Yings blog about art, music, and the art of technology über den CoverFlow-Effekt des iPhones entstammt. Autor: H.Sporenberg Datei: Nadelgrat_01.html

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt var createReflection = function (icon) { var cvs = document.createElement("CANVAS"); var ctx = cvs.getContext('2d'); cvs.width = icon.width; cvs.height = icon.height / 2.0; // flip lower half of image ctx.translate(0, icon.height); ctx.scale(1, -1); ctx.drawImage(icon, 0, 0); // generate fade-out effect ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = "destination-out"; var grad = ctx.createLinearGradient(0, 0, 0, icon.height / 2.0); grad.addColorStop(0, 'rgba(255,255,255,0.5)'); grad.addColorStop(1, 'rgba(255,255,255,1.0)'); ctx.fillStyle = grad; ctx.fillRect(0, 0, icon.width, icon.height / 2.0); return cvs; }; In createReflection() wird zuerst über einen weiteren in-memory-Canvas die untere Hälfte des in icon übergebenen Bildausschnitts umgeklappt. Das Umklappen kann mit der Matrix flipY() realisiert werden. In diesem Fall wird eine weitere Variante zum Spiegeln benutzt, und zwar über die Methode scale(). scale(1,-1) entspricht der Methode flipY() und scale(-1,1) der Methode flipX(). Der Fade-out-Effekt entsteht durch eine Gradiente von semi-transparentem Weiß zu opakem Weiß, die mit Hilfe der Composition-Methode destination-out über das Icon gelegt wird. Datei: Nadelgrat_01.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Damit sind die einzelnen Bildausschnitte definiert und man kann mit dem Zeichnen beginnen. Eine Gradiente von Schwarz nach Weiß mit beinahe Schwarz in der Hälfte des Verlaufs erweckt den Eindruck eines Raumes, in dem die drei Ausschnitte anschließend platziert werden. var grad = context.createLinearGradient(0, 0, 0, canvas.height); grad.addColorStop(0.0, '#000'); grad.addColorStop(0.5, '#111'); grad.addColorStop(1.0, '#EEE'); context.fillStyle = grad; context.fillRect(0, 0, canvas.width, canvas.height); Datei: Nadelgrat_01.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Am einfachsten kann das mittlere Bild des Nadelgrats über setTransform() positioniert und dann mit einem Spiegeleffekt gezeichnet werden // draw middle icon context.setTransform(1, 0, 0, 1, 440, 160); context.drawImage(icons[1], 0, 0, 320, 320); context.drawImage(effects[1], 0, 320, 320, 160); Datei: Nadelgrat_01.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Die Breite des rechten Teilbildes wird für einen besseren 3D-Eindruck um den Faktor 0.9 skaliert, das Resultat mit der Matrix für skeY() um 10o nach unten geneigt und das Resultat rechts von der Mitte positioniert. // draw right icon with skeyY 10° context.setTransform(1, 0, 0, 1, 820, 160); context.transform(1, Math.tan(0.175), 0, 1, 0, 0); context.scale(0.9, 1); context.drawImage(icons[2], 0, 0, 320, 320); context.drawImage(effects[2], 0, 320, 320, 160); Datei: Nadelgrat_01.html Autor: H.Sporenberg

HTML5 Bild- und Pixelmanipulation Fotocollage mit Spiegeleffekt Etwas komplizierter ist das Darstellen des linken Teilbildes, denn nachdem beim Neigen die linke obere Ecke des Ausschnitts den Ankerpunkt bildet, muss um 10o nach oben geneigt und dann das Ergebnis wieder nach unten verscho-ben werden. Hier muss der Satz des Pythagoras angewendet werden. Der dy-Wert ergibt sich als Tangens des Drehwinkels in Radiant mal der Länge der Ankathete, die der Breite des Icons entspricht, also Math.tan(0.175)*320. Zusätzlich muss noch die Skalierung der Bildbreite um 0.9 durch Verschiebung um 320*0.1 nach rechts ausgeglichen werden. // draw left icon with skeyY -10°, watch out for vertical-alignment context.setTransform(1, 0, 0, 1, 60, 160); context.transform(1, Math.tan(-0.175), 0, 1, 0, 0); context.translate(320 * 0.1, Math.tan(0.175) * 320); context.scale(0.9, 1); context.drawImage(icons[0], 0, 0, 320, 320); context.drawImage(effects[0], 0, 320, 320, 160); Datei: Nadelgrat_01.html Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Autor: H.Sporenberg Dieses Beispiel ist dem Buch: HTML5 – K.Förster/B. Öggl – ADDISON-WESLEY entnommen (Seite 183 ff.)

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 1 <html> <head> <title>Canvas - Image - 3D Effekt - Nadelgrat </title> <style type="text/css"> .unterschrift { font-family:Arial,Verdana,arial; color:#4444cd;font-size:55px; position:absolute;top:75px;left:430px;} </style> Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 2 <script type="application/javascript"> function draw() { var canvas = document.getElementById("testcanvas"); var context = canvas.getContext('2d'); var image = new Image(); image.src = 'Nadelgrat_03.jpg'; image.onload = function() { var clipIcon = function (img, x, y, width, height) { var cvs = document.createElement("CANVAS"); var ctx = cvs.getContext('2d'); cvs.width = 320; cvs.height = 320; ctx.drawImage(img, x, y, width, height, 0, 0, 320, 320); ctx.strokeStyle = '#FFF'; ctx.lineWidth = 15; ctx.strokeRect(0, 0, 320, 320); return cvs; }; Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 3 var createReflection = function (icon) { var cvs = document.createElement("CANVAS"); var ctx = cvs.getContext('2d'); cvs.width = icon.width; cvs.height = icon.height / 2.0; // flip lower half of image ctx.translate(0, icon.height); ctx.scale(1, -1); ctx.drawImage(icon, 0, 0); // generate fade-out effect ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = "destination-out"; var grad = ctx.createLinearGradient(0, 0, 0, icon.height / 2.0); grad.addColorStop(0, 'rgba(255,255,255,0.5)'); grad.addColorStop(1, 'rgba(255,255,255,1.0)'); ctx.fillStyle = grad; ctx.fillRect(0, 0, icon.width, icon.height / 2.0); return cvs; }; Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 4 var icons = [ clipIcon(image, 0,0, 1135, 1134), clipIcon(image, 1135,0,1135, 1134), clipIcon(image, 2270,0,1135,1134) ]; var effects = []; for (var i = 0; i < icons.length; i++) { effects[i] = createReflection(icons[i]); }; // draw background gradient from black to almost white var grad = context.createLinearGradient(0, 0, 0, canvas.height); grad.addColorStop(0.0, '#000'); grad.addColorStop(0.5, '#111'); grad.addColorStop(1.0, '#EEE'); context.fillStyle = grad; context.fillRect(0, 0, canvas.width, canvas.height); Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 5 // draw left icon with skeyY -10°, watch out for vertical-alignment context.setTransform(1, 0, 0, 1, 60, 160); context.transform(1, Math.tan(-0.175), 0, 1, 0, 0); context.translate(320 * 0.1, Math.tan(0.175) * 320); context.scale(0.9, 1); context.drawImage(icons[0], 0, 0, 320, 320); context.drawImage(effects[0], 0, 320, 320, 160); // draw middle icon context.setTransform(1, 0, 0, 1, 440, 160); context.drawImage(icons[1], 0, 0, 320, 320); context.drawImage(effects[1], 0, 320, 320, 160); Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 6 // draw right icon with skeyY 10° context.setTransform(1, 0, 0, 1, 820, 160); context.transform(1, Math.tan(0.175), 0, 1, 0, 0); context.scale(0.9, 1); context.drawImage(icons[2], 0, 0, 320, 320); context.drawImage(effects[2], 0, 320, 320, 160); }; } </script> </head> Autor: H.Sporenberg

Fotocollage mit Spiegeleffekt Der komplette Programm-Code – Seite 7 <body onload="draw()"> <canvas id="testcanvas" width="1800" height="700"></canvas> <div class="unterschrift">N a d e l g r a t</div> </body> </html> Autor: H.Sporenberg

alert

alert

JavaScript - Einführung

Ähnliche Präsentationen

Präsentation zum Thema: "JavaScript - Einführung"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback

alert

alert

Anmelden

Anmeldung über soziales Netzwerk:

JavaScript - Einführung

Ähnliche Präsentationen

Präsentation zum Thema: "JavaScript - Einführung"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback