JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 441

Sie haben einen Zeichenbereich und eine Schaltläche in der Webseite. Beim Klick auf die
Schaltläche wollen wir das Gitter des Zeichenbereichs verschieben und dann neu zeichnen.
Hier ist die JavaScript-Datei kap14_25.js:
Listing 14.54■ Verschieben des Gitters
var zb;
window.onload = function() {
document.getElementById("b1").onclick = function() {
with (zb) {
translate(375, 75);
illStyle = "cyan";
illRect(20, 20, 35, 35);
}
};
zb = document.getElementById('cv1').getContext('2d');
with (zb) {
illStyle = "red";
illRect(20, 20, 35, 35);
}
};
Nach dem Laden der Webseite wurde mit illRect(20, 20, 35, 35); ein kleines rotes Recht-
eck an den Koordinaten 20.20 gezeichnet. Wichtig ist, dass zu dem Zeitpunkt der Ursprung
des Gitters noch bei den Koordinaten (0, 0) des Canvas -Bereichs liegt. Damit liegt die linke
obere Ecke des roten Rechtecks bei (20, 20).
Bild 14.27■
Das Rechteck wurde ohne Translation
gezeichnet.
Wenn ein Anwender nun auf die Schaltläche klickt, soll ein weiteres Rechteck (in einer
anderen Farbe, aber das ist egal) an einer anderen Position gezeichnet werden. Beachten
Sie, dass die Methode zum Zeichnen aber identische Koordinaten verwendet. Dennoch wird
die linke obere Ecke nun bei (395, 95) in Hinsicht auf das Koordinatensystem des gesamten
Canvas-Elements liegen. Ist Ihnen klar warum? Vorher haben wir translate(375, 75);
ausgeführt und das hat den Ursprung des Gitters auf diesen Punkt verschoben. Die nachfol-
gende Zeichenoperation des Rechtecks bezog sich also darauf.
Diesen Bezug zum Gitterursprung zu verstehen, ist bei Translationen elementar, denn die
anderen Translationsmöglichkeiten sind in sich schon komplexer als eine reine Verschie-
bung.