HTML and CSS Reference
In-Depth Information
Endkreises mit gleichem Mittelpunkt
(140, 150)
, jedoch 50 Pixeln Radius. Die eigent-
lichen Farbwerte werden nun wieder per
addColorStop()
zugewiesen:
radialGradient.addColorStop(0, 'rgb(255,0,0)');
radialGradient.addColorStop(0.5, 'rgb(0,255,0)');
radialGradient.addColorStop(1, 'rgb(0,0,255)');
Das folgende Beispiel erzeugt einen kreisförmigen Verlauf mit 50 Pixeln Radius um den
Punkt
(140, 150)
:
Bild 2.19:
Beispiel eines kreisförmigen Verlaufs.
//radialGradient
var radialGradient;
radialGradient ctx.createRadialGradient(140,150,0,140,150,50);
radialGradient.addColorStop(0, 'rgb(255,0,0)');
radialGradient.addColorStop(0.5, 'rgb(0,255,0)');
radialGradient.addColorStop(1, 'rgb(0,0,255)');
ctx.fillStyle radialGradient;
ctx.beginPath();
ctx.arc(140, 150, 50, getRadians(0), getRadians(360), false);
ctx.fill();
Um Füllmuster zu erstellen, steht uns die Methode
createPattern()
zur Verfügung.
CanvasPattern createPattern(in HTMLImageElement image,
in optional DOMString repetition);
Wie auch die
drawImage()
-Methoden kann diese Methode sowohl mit HTML-Image-
Elementen als auch mit HTML-
canvas
-Elementen aufgerufen werden. Der zweite
Parameter,
repetition
, kann die Werte
repeat
,
repeat-x
,
repeat-y
und
no-repeat
haben. Der Standardwert ist
repeat
und besagt, dass sich das angegebene Bild beliebig
horizontal und vertikal wiederholen kann, um die Fläche mit dem Muster zu füllen.
Das folgende Beispiel füllt unseren 280 x 300 Pixel großen Canvas mit dem Kalender-
Icon:
