Canvas - HTML5 - page 172

lerdings eine weitere Variante zum Spiegeln, und zwar jene über die Methode
scale() . Dabei entspricht scale(1,-1) der Methode flipY() und scale(-1,1) der
Methode flipX() . Der Fade-out-Effekt entsteht durch eine Gradiente von semi-
transparentem Weiß zu opakem Weiß, die mithilfe der Compositing Methode
destination-out über das Icon gelegt wird.
Damit sind die einzelnen Bildausschnitte definiert, und wir können mit dem
Zeichnen beginnen. Eine Gradiente von Schwarz nach Weiß mit beinahe
Schwarz in der Hälfte des Verlaufs erweckt den Eindruck eines Raums, in dem
wir die drei Ausschnitte anschließend platzieren.
var grad = context.createLinearGradient(
0,0,0,canvas.height
);
grad.addColorStop(0.0,'#000');
grad.addColorStop(0.5,'#111');
grad.addColorStop(1.0,'#EEE');
context.fillStyle = grad;
context.fillRect(0,0,canvas.width,canvas.height);
Am einfachsten können wir das mittlere Bild vom Merced River über setTrans-
form() positionieren und dann mit einem Spiegeleffekt zeichnen.
context.setTransform(1,0,0,1,440,160);
context.drawImage(icons[1],0,0,320,320);
context.drawImage(effects[1],0,320,320,160);
Die Breite des El-Capitan-Bildes skalieren wir für einen besseren 3D-Eindruck
um den Faktor 0.9, neigen das Resultat mit der Matrix für skeyY() um 10° nach
unten und positionieren das Resultat rechts von der Mitte.
context.setTransform(1,0,0,1,820,160);
context.transform(1,Math.tan(0.175),0,1,0,0);
context.scale(0.9,1);
context.drawImage(icons[2],0,0,320,320);
context.drawImage(effects[2],0,320,320,160);
Etwas komplizierter ist dann das Zeichnen des Taft-Point-Bildes links, denn
nachdem beim Neigen die linke obere Ecke des Ausschnitts den Ankerpunkt bil-
det, müssen wir um 10° nach oben neigen und das Resultat dann wieder nach
unten schieben. Der Satz des Pythagoras hilft uns beim Ermitteln des nötigen
dy -Wertes: Er ergibt sich als Tangens des Drehwinkels in Radiant mal der Län-
ge der Ankathete, die der Breite des Icons entspricht, also Math.tan(0.175)*320 .