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

Bild 14.25■
Formen mit Pattern gefüllt
Unter http://downloads.hanser.de inden Sie in Beispiel kap14_23.html ein paar komplexe
Formen, die mit Pattern gefüllt werden.
Schatten können recht beliebig bei graischen Objekten autauchen. Sie speziizieren sie
über vier Eigenschaten:
shadowOffsetX = gleitkommawert
shadowOffsetY = gleitkommawert
shadowBlur = gleitkommawert
shadowColor = farbe
Die Ofset-Werte geben an, wie weit weg vom Objekt ein Schatten liegen soll (Vorgabe ist 0).
Damit kann man eine räumliche Tiefe beeinlussen. Negative Werte gehen nach links oder
oben und positive Werte nach rechts oder unten. Mit shadowBlur geben Sie die Unschärfe
des Schattens an (Vorgabe ist 0) und shadowColor ist ofensichtlich die Farbe (Vorgabe ist
Schwarz - dennoch sollten Sie die Eigenschat explizit setzen, denn einige Browser setzen
sonst keinen Schatten). In dem Beispiel wollen wir bei einem Text Schatten hinzufügen
(kap14_24.js):
Listing 14.52■ Schatten bei den Texten
window.onload = function() {
var zb = document.getElementById('cv1').getContext('2d');
var rg = zb.createRadialGradient(120, 75, 20, 125, 75, 200);
rg.addColorStop(0, 'yellow');
rg.addColorStop(1, 'gray');
with (zb) {
font = "66px Arial";
shadowOffsetX = 10;
shadowOffsetY = 10;
shadowColor = "gray";
illStyle = "Red";
illText("Die Antwort", 250, 370);
strokeStyle = "brown";
font = "166px Courier";
shadowOffsetX = -10;
shadowOffsetY = -10;
shadowColor = "green";
strokeText("ist", 360, 120);
illStyle = rg;
strokeStyle = "Blue";
font = "360px Times New Roman";
shadowOffsetX = -10;