Canvas - HTML5 - page 171

ctx.strokeRect(0,0,320,320);
return cvs;
};
Für jeden dieser drei Ausschnitte erzeugen wir in einem zweiten Schritt den
Spiegeleffekt und speichern ihn im Array effects .
var effects = [];
for (var i=0; i<icons.length; i++) {
effects[i] = createReflection(icons[i]);
}
Die Hauptarbeit findet dabei in der Funktion createReflection() statt, deren
leicht modifizierter Code einem Posting in Charles Yings blog about art, mu-
sic, and the art of technology über den CoverFlow -Effekt des iPhones entstammt
(siehe den verkürzten Weblink http://bit.ly/b5AFW6 ).
var createReflection = function(icon) {
var cvs = document.createElement("CANVAS");
var ctx = cvs.getContext('2d');
cvs.width = icon.width;
cvs.height = icon.height/2.0;
// flip
ctx.translate(0,icon.height);
ctx.scale(1,-1);
ctx.drawImage(icon,0,0);
// fade
ctx.setTransform(1,0,0,1,0,0);
ctx.globalCompositeOperation = "destination-out";
var grad = ctx.createLinearGradient(
0,0,0,icon.height/2.0
);
grad.addColorStop(0,'rgba(255,255,255,0.5)');
grad.addColorStop(1,'rgba(255,255,255,1.0)');
ctx.fillStyle = grad;
ctx.fillRect(0,0,icon.width,icon.height/2.0);
return cvs;
};
In createReflection() wird zuerst über einen weiteren In-memory -Canvas die
untere Hälfte des in icon übergebenen Bildausschnitts umgeklappt. Erinnern
wir uns an die Kürzel für Transformationsmatrizen, könnten wir das Umklap-
pen mit der Matrix für flipY() realisieren. In diesem Fall verwenden wir al-