ich versuche den ganzen Tag schon ein Bild mittels html5 canvas über mein context Feld laufen zu lassen. (Soll sich dann steigern zu panorama).
Ich finde meinen Fehler einfach nicht ich hab mich durch 2 Tuturials durchgekämpft und versuche jetzt das gelernte mit einer Übung zu festigen. Jedoch finde ich meine/n Fehler nicht. Könnt ihr mir weiter helfen?
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
function drawImage(myImage, context){
context.drawImage(imageObj, myImage.x, myImage.y);
}
function animate(myImage, canvas, context, startTime) {
// update
var time = (new Date()).getTime() - startTime;
var linearSpeed = 100;
// pixels / second
var newX = linearSpeed * time / 1000;
if(newX < myImage.x) {
myImage.x = newX;
}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
drawImage(myImage, context);
// request new frame
requestAnimFrame(function() {
animate(myImage, canvas, context, startTime);
});
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImage = {
x: 0,
y: 75,
width: 100,
height: 50,
};
drawImage(myImage, context);
// wait one second before starting animation
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myImage, canvas, context, startTime);
}, 1000);
</script>
</body>
</html>