moviendo una imagen a través de un lienzo html

Question

Estoy tratando de mover una imagen de la derecha al centro y no estoy seguro si esta es la mejor manera.

var imgTag = null; 
    var x = 0; 
    var y = 0; 
    var id; 

    function doCanvas() 
    { 
     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 
     var imgBkg = document.getElementById('imgBkg'); 
     imgTag = document.getElementById('imgTag'); 

     ctx.drawImage(imgBkg, 0, 0); 

     x = canvas.width; 
     y = 40; 

     id = setInterval(moveImg, 0.25); 

    } 

    function moveImg() 
    { 
     if(x <= 250) 
      clearInterval(id); 

     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     var imgBkg = document.getElementById('imgBkg'); 
     ctx.drawImage(imgBkg, 0, 0); 

     ctx.drawImage(imgTag, x, y); 

     x = x - 1; 
    } 

¿Algún consejo?

Answer 1

drawImage() permite definir qué parte de la imagen de origen dibujar en el lienzo de destino. Sugeriría que cada moveImg() calcule la posición de la imagen anterior, sobrescriba la imagen anterior con esa parte de imgBkg, luego dibuje la nueva imagen. Supuestamente, esto ahorrará algo de poder de computación.

Answer 2

Para las animaciones sin demora, generalmente uso kinetic.js.

var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
     }); 
     var layer = new Kinetic.Layer(); 

     var hexagon = new Kinetic.RegularPolygon({ 
     x: stage.width()/2, 
     y: stage.height()/2, 
     sides: 6, 
     radius: 70, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4 
     }); 

     layer.add(hexagon); 
     stage.add(layer); 

     var amplitude = 150; 
     var period = 2000; 
     // in ms 
     var centerX = stage.width()/2; 

     var anim = new Kinetic.Animation(function(frame) { 
     hexagon.setX(amplitude * Math.sin(frame.time * 2 * Math.PI/period) + centerX); 
     }, layer); 

     anim.start(); 

Aquí está el ejemplo, si quieres echar un vistazo.

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

Por eso sugiero que esto es debido a que, setInterval o SetTimeOut una función particular causa problemas cuando gran cantidad de animaciones simultáneas tienen lugar, pero kinetic.Animation trata de una tasa de fotogramas de forma más inteligente.

Answer 3

Esta pregunta es de 5 años de edad, pero ya que ahora tenemos requestAnimationFrame, aquí es un enfoque para que el uso de JavaScript básico:

var imgTag = new Image(); 
 
var canvas = document.getElementById('icanvas'); 
 
var ctx = canvas.getContext("2d"); 
 
var x = canvas.width; 
 
var y = 0; 
 

 
imgTag.onload = animate; 
 
imgTag.src = "http://i.stack.imgur.com/Rk0DW.png"; // load image 
 

 
function animate() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas 
 
    ctx.drawImage(imgTag, x, y);      // draw image at current position 
 
    x -= 4; 
 
    if (x > 250) requestAnimationFrame(animate)  // loop 
 
}

<canvas id="icanvas" width=640 height=180></canvas>