Information Technology Reference
In-Depth Information
Abbildung 5.37: Foto-Collage mit Spiegeleffekt im Pseudo-3D-Raum
Beginnen wir mit dem Ausstanzen der drei quadratischen Ausschnitte für Taft
Point, Merced River und El Capitan. Das Ergebnis speichern wir im Array icons .
var icons = [
clipIcon(image,0,100,600,600),
clipIcon(image,620,615,180,180),
clipIcon(image,550,310,400,400)
];
Das Zuschneiden und Anpassen der unterschiedlich großen Ausschnitte erle-
digt die Funktion clipIcon() . In ihr wird zuerst ein neuer In-memory -Canvas
mit 320 x 320 Pixeln Größe erzeugt, auf den wir dann mit drawImage() das ent-
sprechend verkleinerte (oder vergrößerte) Icon kopieren und mit einem 15 Pi-
xel breiten, weißen Rahmen versehen.
var clipIcon = function(img,x,y,width,height) {
var cvs = document.createElement("CANVAS");
var ctx = cvs.getContext('2d');
cvs.width = 320;
cvs.height = 320;
ctx.drawImage(img,x,y,width,height,0,0,320,320);
ctx.strokeStyle = '#FFF';
ctx.lineWidth = 15;
Search WWH ::




Custom Search