Animate image js

Question

У меня 2 изображения на холсте, и я хочу сделать imageObg для анимации. На самом деле я хочу, чтобы он сделал линейный переход вправо. Я нашел способ анимировать объект, как прямоугольник, но я не могу оживить объект изображения, который я использую из другого источника.

Есть ли в любом случае, что мне удастся сделать? Кто-нибудь знает?

window.onload = function() { 
 

 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var imageObj = new Image(); 
 
    var imageObj2 = new Image(); 
 

 
    imageObj.onload = function() { 
 
    context.drawImage(imageObj, 69, 130); 
 
    }; 
 

 
    imageObj2.onload = function() { 
 
    context.drawImage(imageObj2, 0, 0); 
 
    }; 
 

 

 
    imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png' 
 
    imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg' 
 

 
};

body { 
 
    background-color: black 
 
}

<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1"> 
 
    <canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;"> 
 
    Your browser does not support HTML5 Canvas. 
 
    </canvas> 
 
</div>

Answer 1

Всего две вещи.

1. Установить ручную обработку с использованием setInterval.
2. Установите процедуру перемещения (или физики), вызовите ее после каждого рендера.

window.onload = function() { 
 

 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var imageObj = new Image(); 
 
    var imageObj2 = new Image(); 
 

 
    imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png' 
 
    imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg' 
 

 
    window.setInterval(renderFrame, 50); 
 

 
    var ship = { 
 
    x: 69, 
 
    y: 130 
 
    }; 
 

 
    function renderFrame() { 
 

 
    moveShip(); 
 

 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (imageObj.complete) { 
 
     context.drawImage(imageObj2, 0, 0); 
 
    } 
 
    if (imageObj.complete) { 
 
     context.drawImage(imageObj, ship.x, ship.y); 
 
    } 
 
    } 
 

 
    function moveShip() { 
 
    ship.x += 20; 
 
    if (ship.x > canvas.width) { 
 
     ship.x = 0 - imageObj.width; 
 
     ship.y = Math.random() * 250 + 50; 
 
    } 
 

 
    } 
 

 
};

body { 
 
    background-color: black 
 
}

<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1"> 
 
    <canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;"> 
 
    Your browser does not support HTML5 Canvas. 
 
    </canvas> 
 
</div>

Answer 2

Просто увеличить й положение изображения с помощью команды setInterval.

var img = document.createElement("IMG"); 
var img.src = [Image Source]; 

var x = 0; 
window.setInterval(function() { 
    x ++; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(img, x, 0); 
}, 50); 

Надеюсь, это поможет.

Edit:

Вот JSFiddle Example.