Canvas - HTML5 - page 164

Sehen wir uns zuerst an, wie der Hintergrund zustande kommt:
var bg = new Image();
bg.src = 'icons/pattern_125.png';
bg.onload = function() {
context.globalAlpha = 0.5;
context.fillStyle = context.createPattern(bg,'repeat');
context.fillRect(0,0,canvas.width,canvas.height);
};
Die ersten beiden Zeilen erzeugen wieder ein neues Image -Objekt und setzen
dessen src -Attribut auf das Bild pattern_125.png im Verzeichnis icons . Genau
wie bei drawImage() müssen wir vor dem Definieren des Patterns sicherstellen,
dass das gewünschte Bild auch wirklich geladen ist. Die Funktion bg.onload()
enthält dabei den eigentlichen Code zum Generieren des sich wiederholenden
Musters, das wir mit 50 % Opazität auf der gesamten Canvas-Fläche auftragen.
Über das gleiche Prozedere füllen wir den Titeltext Yosemite! mit pattern_107
.png .
Für die überlappenden Bildausschnitte setzen wir kurzerhand das ganze Yose-
mite-Bild yosemite.jpg als Muster ein und arbeiten dann in einer for -Schleife
das Input-Array extents ab, in dem sich x -, y -, width - und height -Werte der
gewünschten Ausschnitte befinden. Über den Aufruf von fillRect() wird der
entsprechende Bildbereich als Füllmuster gezeigt und mittels strokeText()
mit einem zusätzlichen Rahmen versehen.
var extents = [
{ x:20,y:50,width:120,height:550 } // und 7 weitere ...
];
var image = new Image();
image.src = 'images/yosemite.jpg';
image.onload = function() {
context.fillStyle = context.createPattern(
image,'no-repeat'
);
for (var i=0; i<extents.length; i++) {
var d = extents[i]; // short-cut
context.fillRect(d.x,d.y,d.width,d.height);
context.strokeRect(d.x,d.y,d.width,d.height);
}
};