Imagen en movimiento HTML5, no se mueve

¿Por qué mi image no se mueve? Me puedes ayudar …

<script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'bold 20pt Calibri'; ctx.fillText('Traffic Light SIMULATION', 250, 25); function animate(imageObj, canvas, ctx, startTime) { // update var time = (new Date()).getTime() - startTime; var linearSpeed = 100; // pixels / second var newX = linearSpeed * time / 1000; if(newX < canvas.width - imageObj.width / 2) { imageObj.x = newX; } // request new frame requestAnimFrame(function() { animate(imageObj, canvas, ctx, startTime); }); } var imageObj = new Image(); imageObj.onload = function() { ctx.save(); ctx.translate(imageObj.width,0); ctx.scale(-0.5,0.5); ctx.drawImage(imageObj,200,100); ctx.restre(); }; imageObj.src = 'car.png'; setTimeout(function() { var startTime = (new Date()).getTime(); animate(imageObj, canvas, ctx, startTime); }, 2000); </script> 

ctx.drawImage dibujar la image en cada fotogtwig al utilizar canvas, renderiza la image una vez cuando llama a ctx.drawImage y, a partir de ese momento, no representa nada en el canvas, por lo que permanece igual.

Intereting Posts