|
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 Flugzeugen stellt dieses Instrument die Fluglage im Verhältnis zu einer waagrechten Ausrichtung dar. In diesem Skript wird nur eine Achsänderung von dem Instrument angezeigt, die Längsachse, also das Kippen der Tragflächen.
'Steuerknüppel' ist die Maus. Das Bewegen des Mauscursors in x-Richtung wird als Steuersignal interpretiert, wobei die Mitte des Canvas der Nullstellung, einem waagrechten Flugzeug, 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 Maximalausschlag 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
[die Artikel sind gerade in Bearbeitung. Bitte haben Sie noch ein paar Stunden Geduld...]