Hallo,
ich schreibe momentan meine Bachelorarbeit zum Thema "Zukunft von HTML5 Anwendungen im Web 2.0" und bin gerade noch mehr oder weniger dabei die Grundlagen darzustellen.
Hatte jetzt vor ein kleines Beispiel mit canvas und den oben genannten Funktionen zu machen. Im Prinzip will ich nur einen Ausschnitt eines Bildes nehmen und an einem anderen Punkt in der Canvas wieder einfügen, aber es funktioniert einfach nicht. Das Bild selber ist 360x500 Pixel groß und wenn man sich den Quellcode anschaut bleibt alles noch im Rahmen der Canvas und überschneiden tut sich da auch nichts. Habe auch schon geschaut ob ne Exception geschmissen wird bei beiden Methoden, aber da is nix. Ich könnte mir höchstens vorstellen, dasses was mit onload zutun hat. Hab einfach noch zu wenig Ahnung von JavaScript ..
Quellcode:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cvs').getContext('2d');
var img = new Image();
img.src = 'futurama.png';
img.onload = function(){
ctx.drawImage(img,0,0);
}
var imgData = ctx.getImageData(50, 50, 80, 80);
ctx.putImageData(imgData, 400, 600);
}
</script>
</head>
<body onload="draw();">
<canvas id="cvs" width="600" height="1000">
</canvas>
</body>
</html>
Wäre wirklich sehr nett wenn man mir helfen könnte. Alleine scheine ich gerade nicht mehr weiter zu kommen ..
ich schreibe momentan meine Bachelorarbeit zum Thema "Zukunft von HTML5 Anwendungen im Web 2.0" und bin gerade noch mehr oder weniger dabei die Grundlagen darzustellen.
Hatte jetzt vor ein kleines Beispiel mit canvas und den oben genannten Funktionen zu machen. Im Prinzip will ich nur einen Ausschnitt eines Bildes nehmen und an einem anderen Punkt in der Canvas wieder einfügen, aber es funktioniert einfach nicht. Das Bild selber ist 360x500 Pixel groß und wenn man sich den Quellcode anschaut bleibt alles noch im Rahmen der Canvas und überschneiden tut sich da auch nichts. Habe auch schon geschaut ob ne Exception geschmissen wird bei beiden Methoden, aber da is nix. Ich könnte mir höchstens vorstellen, dasses was mit onload zutun hat. Hab einfach noch zu wenig Ahnung von JavaScript ..
Quellcode:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cvs').getContext('2d');
var img = new Image();
img.src = 'futurama.png';
img.onload = function(){
ctx.drawImage(img,0,0);
}
var imgData = ctx.getImageData(50, 50, 80, 80);
ctx.putImageData(imgData, 400, 600);
}
</script>
</head>
<body onload="draw();">
<canvas id="cvs" width="600" height="1000">
</canvas>
</body>
</html>
Wäre wirklich sehr nett wenn man mir helfen könnte. Alleine scheine ich gerade nicht mehr weiter zu kommen ..
