Остановить движущееся изображение в HTML5 Canvas

Question

Im довольно новый элемент canvas в HTML5.

Что я хочу сделать, это переместить изображение с правой стороны экрана влево, как только оно достигнет слева, я хочу, чтобы оно начиналось снова с правой стороны. Я только хочу, чтобы это было возможно 2/3 раза, а затем остановилось.

Я попытался добавить цикл for так, чтобы он ограничивал итерации, но это было безуспешно.

Любая помощь вообще будет оценена по достоинству.

Heres мой код:

<canvas id="myCanvas" width="600" height="400"></canvas> 
<script> 
    window.addEventListener('load', function() { 
    var 
    img = new Image, 
    ctx = document.getElementById('myCanvas').getContext('2d'); 

    img.src = 'pies.png'; 
    img.addEventListener('load', function() { 

    var interval = setInterval(function() { 
     var x = 650, y = 194; 

     return function() { 
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
     ctx.drawImage(img, x, y); 

     x -= 1; 
     if (x < -500) { 
      x = 650; 
     } 
     }; 
    }(), 1000/40); 
    }, false); 
}, false); 


    </script> 

Answer 1

Один из способов, чтобы указать максимальное количество ходов левонаправленный:

// allow leftward moves = 2 1/2 time the canvas width 
// (plus an allowance for the image width) 

var maxMoves = (canvas.width+image.width) *2.5; 

Тогда просто отсчет maxMoves, пока ноль. В нуле, остановить анимацию:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
ctx.fillStyle='skyblue'; 
 

 
var currentX=cw; 
 
var delay=16; // 16ms between moves 
 
var continueAnimating=true; 
 
var nextMoveTime,maxMoves; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png"; 
 
function start(){ 
 

 
    maxMoves=(cw+img.width)*2.5; 
 

 
    nextMoveTime=performance.now(); 
 

 
    requestAnimationFrame(animate); 
 

 
} 
 

 

 
function animate(currentTime){ 
 

 
    if(continueAnimating){ requestAnimationFrame(animate); } 
 

 
    if(currentTime<nextMoveTime){return;} 
 

 
    nextMoveTime=currentTime+delay; 
 
    
 
    ctx.fillRect(0,0,cw,ch); 
 
    ctx.drawImage(img,currentX,50); 
 

 
    if(--currentX<-img.width){ currentX=cw; } 
 

 
    if(--maxMoves<0){continueAnimating=false;} 
 

 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<p>Stop animating after 2 1/2 "sunrises"</p> 
 
<canvas id="canvas" width=300 height=300></canvas>