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