Déplacement d'une image sur une toile html

Question

J'essaie de déplacer une image de la droite vers le centre et je ne suis pas sûre si c'est la meilleure façon.

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; 
    } 

Un conseil?

Answer 1

drawImage() permet de définir la partie de l'image source à dessiner sur le canevas cible. Je suggère pour chaque moveImg() de calculer la position de l'image précédente, remplacez l'image précédente avec cette partie de imgBkg, puis dessinez la nouvelle image. Supposément cela permettra d'économiser de la puissance de calcul.

Answer 2

Pour les animations sans décalage, j'utilise généralement 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(); 

Voici l'exemple, si vous voulez jeter un coup d'œil.

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

Pourquoi je suggérer cela est parce que, setInterval ou SetTimeOut une fonction particulière provoque des problèmes lorsque grande quantité d'animations simultanées ont lieu, mais kinetic.Animation traite framerate plus intelligemment.

Answer 3

Cette question est de 5 ans, mais depuis que nous avons maintenant requestAnimationFrame, voici une approche pour que l'utilisation de JavaScript vanille:

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>