canvas-Experimente Teil 2: Ein künstlicher Horizont

Der künstliche Horizont

Im zweiten Artikel zum Thema canvas entsteht mit der arc-Funktion ein künstlicher Horizont. Mit der Maus verändert man die 'Fluglage', ab 30° soll eine Warnung angezeigt werden.
Diesmal wenden wir die arc-Funktion an, um einen künstlichen Horizont nachzubilden. In Flug­zeugen stellt dieses Instrument die Fluglage im Verhältnis zu einer waag­rechten Aus­richtung dar. In diesem Skript wird nur eine Achs­änderung von dem Instrument angezeigt, die Längs­achse, also das Kippen der Trag­flächen.

'Steuerknüppel' ist die Maus. Das Bewegen des Maus­cursors in x-­Richtung wird als Steuer­signal interpretiert, wobei die Mitte des Canvas der Null­stellung, einem waag­rechten Flug­zeug, entsprechen soll.

Diese Maschine ist wenig belastbar und sollte nicht mehr als 30° gekippt werden. Ab 30° erscheint eine Warnung mit dem aktuellen Winkel, die Farbe des Horizonts wird zunehmend rot. Der Maximal­ausschlag wird auf 60° begrenzt.

Soviel zur Beschreibung. Vielleicht sehen Sie sich das Teil an, bevor wir hier weiter machen? >> http://www.mydemospace.de/_canvas2.html

Aufbau der HTML-Seite

Die HTML-Seite benutzt die gleiche div-Konstruktion wie die anderen Beispiele dieses Blogs. Ganz oben befindet sich eine debug-Zeile (#debug), in die Daten und Meldungen geschrieben werden. Darunter findet sich der (leere) Container-Bereich (#container). Ein <canvas>-Element sucht man hier vergeblich; es wird erst zur Laufzeit eingeblendet. Abschliessend folgt die Fußzeile (#foot) mit einem Link zurück zum Blog und einem Link zum Öffnen des Quelltext. Dieser wird in einem bis dahin unsichtbaren div (#srcdiv) angezeigt. Formatiert wird alles durch canvas.css. Zum Test der Textfunktionen des canvas wird im Stylesheet ein Font geladen und über @fontface bereit gestellt.

Never leave home without it...

Weil man damit so leicht und mit wenig Tipparbeit auf das DOM zugreifen kann, benutzen wir auch hier die Javascript-Bibliothek jQuery.
Um auf herkömmliches Javascript ohne jQuery umzustellen, müssen die Objektreferenzen ($("#name_des_div")) geändert werden. Suchen Sie dazu im Quelltext nach $(.
Das Skript initialisiert zu Beginn einige globale Variablen:

var _cont; // container div
var _drCanv; // canvas element, wird vom skript erzeugt
var _pane; // canvas 2d-context

Dann wird per jQuery auf das Laden des DOM gewartet. Damit stellen wir sicher, dass alle benötigten Komponenten vom Server in den Browser geholt wurden:

$(document).ready( function() {
  shmsg("loading..."); // keine Nachricht? Skript buggy!
  srcviewer(); // routinen für den sourceviewer, für canvas unerheblich
  initcanvas("1024","476","#container"); // canvas methoden initialisieren, w und h vorgeben
  $(_cont)[0].addEventListener("mousemove",handlemouse,false);
});

Bevor Sie jetzt dieses Code-Stück verwenden, lesen Sie bitte erst weiter...

Die Funktion initcanvas erzeugt nun das <canvas>-Element und schiebt es in den container:

function initcanvas(cW,cH,cC){
  _cont = $(cC); //div-id,z.b. "#container"
  _cont.html('<canvas id="drawcanvas" width="' + cW + '" height="' + cH + '"></canvas>');
...

Dann wird dieser Canvas einer Variablen zugewiesen und sein 2D-Kontext geholt.

  drCanv = $('#drawcanvas')[0]; // jQuery! sonst document.getElementById
  _pane = drCanv.getContext("2d");
...

Wie im Kommentar bereits zu sehen, kann man die Objektreferenz document.getElementById("drawcanvas") in jQuery abkürzen mit $("#drawcanvas")[0]. Dieses DOM-Objekt speichern wir in drCanv und holen mit drCanv.getContext("2d") den Zeichen-Kontext. "2D" weist schon mal darauf hin, dass es irgendwann einen "3D"-Kontext geben wird, aber das dauert wohl noch etwas...
Anders als bei vorherigen Artikeln gibt es diesmal keine wild im Text verstreuten Links, sondern eine Linkliste zum Schluss.

Links

Titel	Link	Beschreibung
Mozilla Developer Network: Canvas Tutorial	https://developer.mozilla.org/en/Canvas_tutorial	Ausführliches Tutorial in englischer Sprache
Mozilla Developer Network: Basic Animations	https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations	Grundlegende Animationsroutinen (Artikel in Englisch)
2D Kontext	http://dev.w3.org/html5/2dcontext/	Beschreibung des context beim W3C (working draft, english)
Ajaxschmiede Canvas Tutorial	http://www.ajaxschmiede.de/canvas/einfuehrung-in-canvas/	Dieses Tutorial in deutscher Sprache basiert auf dem Mozilla-Beitrag (s.o.)
Wikipedia darf natürlich nicht fehlen...	http://de.wikipedia.org/wiki/Canvas_%28HTML-Element%29	Artikel über das Canvas-Element mit weiteren nützlichen Links

[die Artikel sind gerade in Bearbeitung. Bitte haben Sie noch ein paar Stunden Geduld...]