Java Reference
In-Depth Information
Bild 14.16■
Wenn ein Browser es unterstützt, sehen
Sie zwei sich überlagernde Rechtecke.
Ein Farbverlauf mit Schleife und einfachen rechtecken
Betrachten wir folgende Abwandlung unseres Einstiegsbeispiels, bei dem der
Canvas
-
Bereich auf
width:650px;
und
height:450px;
erweitert wurde
(kap14_13.js):
Listing 14.38■
Die Farbe wird berechnet.
window.onload=function () {
var zeichnenbereich =
document.getElementsByTagName('canvas')[0].getContext('2d');
for (var i=3;i<255;i++) {
zeichnenbereich.illStyle = 'rgba(' + i + ',' +
(255-i) + ',' + i + ',' + (1/(i/3)) + ')';
zeichnenbereich.illRect(i * 2, i, 25, 25 + i);
}
};
In dem Beispiel werden in einer Schleife die Werte für die CSS-Funktion
rgba()
in Abhän-
gigkeit vom Zählindex der Schleife berechnet (sowohl die Rot-, Grün- und Blauanteile als
Bild 14.17■
Eine perspektivische Form mit
Farbfüllung
Search WWH ::
Custom Search