JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 438

Bild 14.24■
Gezeichnete Texte eröfnen Möglichkeiten, wie
man sie von Wordarts in Textverarbeitungen
kennt.
sind. Beachten Sie, dass einmal mit zwei Methoden der gleiche Text samt identischer Koor-
dinaten speziiziert wird ( illText("42", 25, 270); und strokeText("42", 25, 270); ).
Das bedeutet, dass der gefüllte Bereich mit einer zusätzlichen Außenlinie umrandet wird.
Des Weiteren verwenden wir in dem Beispiel einen radialen Gradienten, den wir als Fül-
lung für einen Text verwenden.
14.5.1.12■Pattern und Schatten
Unter dem Canvas -Konzept gibt es auch sogenannte Pattern (wiederholende Füllmuster)
und Schatten. Diese Pattern werden mit der Methode createPattern() erzeugt und wie
Farben oder Gradienten als Füllung verwendet. Als ersten Parameter geben Sie eine Bildre-
ferenz oder ein anderes Canvas -Element an (wie bei der dritten Variante von drawImage() -
allerdings muss hier das Bild vor einer Verwendung auf jeden Fall schon geladen sein). Der
zweite Parameter ist der Typ der Wiederholung. Das können die folgenden Werte sein:
repeat
repeat-x
repeat-y
no-repeat
Diese Werte und deren Bedeutung sind aus CSS bekannt.
Ein Beispiel mit einem Pattern
Beispiel (kap14_22.js):
Listing 14.51■ Pattern als Füllung
window.onload = function() {
var zb = document.getElementById('cv1').getContext('2d');
var img = new Image();
img.src = 'images/b6.png';
var pattern = zb.createPattern(img, "repeat");
zb.illStyle = pattern;
zb.illRect(20, 20, 350, 350);
img.src = 'images/b4.png';
pattern = zb.createPattern(img, "no-repeat");
zb.illStyle = pattern;
zb.font = "560px Times New Roman";
zb.illText("42", 55, 420);
};