Java Reference
In-Depth Information
angezeigt werden soll. Wenn sich die Parameter
qBreite
und
zBreite
im Wert unterschei-
den, wird das Bild in der Breite skaliert. Analog verhält es sich bei
qHoehe
und
zHoehe
mit
der Höhe. Oder anders ausgedrückt - wenn Sie nicht skalieren wollen, müssen diese Werte
immer paarweise gleich sein. Als Basis für unser Beispiel verwenden wir in
kap14_19.html
dieses Mal zwei
Canvas
-Elemente:
Listing 14.45■
Zwei Canvas-Bereiche
...
<script type="text/javascript" src="lib/js/kap14_19.js"></script>
</head>
<body>
<h1>Canvas</h1>
<canvas width="650" height="250" id="cv1">
Hier sollte der erste Canvas-Bereich zu sehen sein</canvas>
<hr /><canvas width="650" height="350" id="cv2">
Hier sollte der zweite Canvas-Bereich zu sehen sein</canvas>
</body>
</html>
Der erste
Canvas
-Bereich soll mit uns bekannten Techniken gestaltet werden. Dazu erzeu-
gen wir einfach ein Rechteck und füllen dieses mit einem Farbverlauf. Aus diesem Bereich
wollen wir einen Ausschnitt auswählen (das bedeutet nicht, dass er dort weggenommen
wird) und in dem zweiten
Canvas
-Bereich anzeigen. Dazu erzeugen wir mit JavaScript ein
Bild und zeigen auch davon einen Ausschnitt an
(kap14_19.js):
Listing 14.46■
Auswahl bestimmter Bestandteile
window.onload=function () {
var zb = document.getElementById('cv2').getContext('2d');
var bild = new Image();
bild.src="images/b4.png";
var qb = document.getElementById('cv1').getContext('2d');
var rb1 = qb.createRadialGradient(120,75,20,125,45,200);
rb1.addColorStop(0,'yellow');
rb1.addColorStop(1,'darkblue');
qb.illStyle = rb1;
qb.illRect(5,5,640,240);
zb.drawImage(document.getElementById('cv1'), 33,71,104,124,21,20,600,300);
zb.drawImage(bild, 50,71,120,150,80,120,120,150);
};
In diesem Beispiel arbeiten wir mit IDs für die
Canvas
-Bereiche. Wir wählen zuerst den
Zielbereich
zb
, in dem wir die Ausschnitte mit
drawImage()
zeichnen wollen. Danach er -
zeugen wir in dem
Canvas
-Element, das als Quellbereich (
qb
) dient, ein Rechteck mit
einem Farbverlauf. Die Anweisung
zb.drawImage(document.getElementById('cv1'),
33,71,104,124,21,20,600,300);
ist nun spannend. Wir selektieren von dem gerade
gemalten Bild (Teil des
Canvas
-Objekts) einen Teil (beachten Sie, dass wir nur das DOM-
Objekt und nicht den Zeichenbereich selektieren) und geben ihn im Zielbereich aus. Dabei
unterscheiden sich die Breite und Höhe des Ausschnitts und des Zielzeichenbereichs. Wir
skalieren also den Bereich.
Das Bild, das wir zusätzlich teilweise ausgeben wollen, erzeugen wir ganz klassisch mit
JavaScript und einem URL. Mit
zb.drawImage(bild,
50,71,120,150,80,120,120,150);
Search WWH ::
Custom Search