Information Technology Reference
In-Depth Information
5.8.1
Arbeiten mit dem »ImageData«-Objekt
Nähern wir uns dem
ImageData
-Objekt mit einem 2 x 2 Pixel großen Canvas, auf
den wir vier 1 x 1 Pixel große, gefüllte Rechtecke in den benannten Farben
navy
,
teal
,
lime
und
yellow
zeichnen.
context.fillStyle = 'navy';
context.fillRect(0,0,1,1);
context.fillStyle = 'teal';
context.fillRect(1,0,1,1);
context.fillStyle = 'lime';
context.fillRect(0,1,1,1);
context.fillStyle = 'yellow';
context.fillRect(1,1,1,1);
Über die Methode
getImageData(sx, sy, sw, sh)
greifen wir im nächsten Schritt
auf das
ImageData
-Objekt zu, wobei die vier Argumente den gewünschten Can-
vas-Ausschnitt als Rechteck festlegen.
ImageData = context.getImageData(
0,0,canvas.width,canvas.height
);
Abbildung 5.27:
Das »ImageData«-Objekt