Java Reference
In-Depth Information
Bezeichner
ill
(Füllung) oder
stroke
(Rahmen bzw. Außenlinie) aufweisen. Ganz wichtig
sind
illStyle
und
strokeStyle
. Die zugewiesene Farbe kann ein String mit einem Farbna-
men oder ein CSS-Farbwert sein. Bei CSS-Werten kann man selbstverständlich auch die
rgb()
- oder die
rgba()
-Funktion verwenden. Das sehen Sie in den nächsten Beispielen
häuiger. Darüber hinaus kann man auch einen Farbverlauf (ein Gradientenobjekt) oder ein
Patternobjekt zuweisen. Beachten Sie, dass eine eingestellte Farbe (wie auch andere Eigen-
schaten des Graikkontextes) so lange wirkt, solange keine neue Farbe dem Graikkontext
zugewiesen wird.
Ein erstes Canvas-Beispiel
Damit „Butter bei die Fische kommt“, betrachten wir ein erstes einfaches Beispiel
(kap14_12.
html):
Listing 14.36■
Die Webseite mit dem Canvas-Element
...
<script type="text/javascript" src="lib/js/kap14_12.js"></script>
</head>
<body>
<h1>Canvas</h1>
<canvas width="250" height="150">
<img src="images/b5.png" alt="Alternative zu Canvas"/></canvas>
</body>
</html>
In der Webseite sehen Sie ein
Canvas
-Element mit einem Alternativinhalt (hier ein Bild),
der angezeigt werden soll, wenn ein Browser dieses neue Canvas-Element nicht unterstützt.
Hier ist die referenzierte JavaScript-Datei
kap14_12.js:
Listing 14.37■
Zeichnen auf dem Graikkontext
function zeichnen() {
var zeichnenbereich =
document.getElementsByTagName('canvas')[0].getContext('2d');
zeichnenbereich.illStyle = "rgb(200,0,0)";
zeichnenbereich.illRect(15, 15, 155, 50);
zeichnenbereich.illStyle = "rgba(0, 20, 250, 0.1)";
zeichnenbereich.illRect(30, 40, 255, 250);
}
function init() {
zeichnen();
}
window.onload = init;
In der Funktion
zeichnen()
, die beim Laden der Webseite ausgeführt wird, selektieren wir
den Graikkontext und speichern die Referenz darauf in der Variablen
zeichnenbereich
. In
den folgenden Zeilen wird eine Methode dieses zweidimensionalen Graikkontextes ver-
wendet, die noch erklärt wird. Nur dürte bereits durch den Namen
illRect()
klar sein,
dass hier gefüllte Rechtecke gezeichnet werden. Wir legen auch mit CSS-Standardfunktio-
nen die Farbfüllung von Objekten fest (einmal mit Transparenz). Hierzu verwenden wir
illStyle
.
Search WWH ::
Custom Search