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

14.5.1.7■Transparenz
Wir haben ja gerade mit rgba() gesehen, dass wir auf Canvas -Objekten Transparenzefekte
bewirken können. Darüber hinaus gibt es eine globale Eigenschat globalAlpha , der Sie
Transparenzwerte zwischen 0 (volltransparent) und 1.0 (voll deckend - default) zuweisen
können, um damit überdeckenden Formen im Canvas -Bereich semi-transparente Efekte zu
verpassen. Dieser Wert wird für alle Rahmen und Füllungen gelten.
14.5.1.8■rechtecke
Ein Rechteck ist im Canvas -Konzept eine herausgehobene Form, denn Sie wird als grai-
sches Primitives verstanden. Wir haben bisher ja schon Rechtecke benutzt. Betrachten wir
aber kurz die genauen Details. Es gibt im API drei Funktionen zum Zeichnen:
illRect(x, y, breite, höhe) : gefülltes Rechteck,
strokeRect(x, y, breite, höhe) : ein leeres Rechteck (nur der Rahmen),
clearRect(x, y, breite, höhe) : Leeren eines Bereichs und transparent machen.
Die ersten beiden Parameter sind jeweils die X- und Y-Koordinate von der linken oberen
Ecke des Bereichs (relativ zum Ursprung) und die anderen beiden die Breite und Höhe des
Bereichs.
14.5.1.9■Bilder und Bildausschnitte
Die Anzeige von Bildern auf einem Canvas-Bereich ist extrem einfach. Sie basiert auf der Ver-
wendung der Methode drawImage() . Sie können damit jedes Bild anzeigen, dass Sie irgendwie
per JavaScript geladen oder zugänglich haben. Es gibt drei Varianten der Methoden.
HInWEIS: Beim Zeichnen von Bildern kann es durch das Laden des Bilds Ver-
zögerungen beim Aufbau des Canvas -Bereichs geben.
Bilder ausgeben
Die einfachste besitzt drei Parameter und diese geben das Bild selbst und die X- und Y-Koor-
dinate für die linke obere Ecke des Bilds an (kap14_16.js) .
Listing 14.42■ Ein Bild anzeigen
window.onload=function () {
var zb = document.getElementsByTagName('canvas')[0].getContext('2d');
var bild = new Image();
bild.src="images/b4.png";
zb.drawImage(bild,10,50);
};
Sie sehen, wie das Bild, das in der Variable bild referenziert wird, an der Position 10, 50
angezeigt wird.
PrAXISTIPP: Die Methode kann auch direkt ein Bild laden, wenn Sie dieses als
URL angeben.