캔버스 : 튀어 오르는 공 개체의 배열에있는 모든 개체가 표시되지 않습니다.

Question

laravel 5.5, vuejs 및 vue-router를 사용하여 spa/rest/crud 응용 프로그램을 만들었습니다. 이제 아이디어는 방문 페이지에 구성 요소를 사용하고 캔버스를 조금 돋보이게하는 것을 염두에 두었습니다. (원래 p5.js,하지만 지금 당장 포기했습니다.) 지금까지 그렇게 좋았습니다. Vue-Router를 통해 작업하는 Vue 구성 요소가 있고 프론트 페이지의 경우 템플릿 데이터의 캔버스 요소에 공 (ball) 객체 형태로 피드하는 사용자 지정 지시문을 사용하여 구성 요소를 만들었습니다.

나는 Canvas로 전환해야만했는데 나는 정말로 익숙하지 않았다. 문제가 발생했다. 테스트로서 4 개의 볼을 배열에 넣습니다. 그러나 단지 1 개만 보여주고 있습니다. 이제 clearRect 함수를 비활성화합니다. 그들은 지저분한 방식으로 나타납니다. 나는 볼을 '후행'에서 지키기 위해 beginPath()를 사용했다. 그러나 내가 그렇게 할 때 하나가 나타난다. 어쩌면 간과 할 수없는 간단한 것일 수도 있습니다. 난 내가 아래의 문제를 일으키는 생각하는 부분을 게시합니다 :

<script>    
export default { 
    data: function(){ 
     return { 

     } 
    }, 
    directives: { 
     bindCanvas: { 

     inserted: function (el) { 
      var ctx = el.getContext("2d"); 
      var Ball = function(x,y,r){ 
       this.position = {}; 
       this.position.x = x; 
       this.position.y = y; 
       //i could not use vectors so i came up with this solution 
       this.velocity = {x:0,y:0}; 
       this.acceleration = {x:0,y:0};     
       this.radius = r; 
      }; 
      Ball.prototype.addForce = function(x,y){ 

       this.acceleration.x += x/1000; 
       this.acceleration.y += y/1000; 

      }; 
      Ball.prototype.move = function(){     

       this.position.x += this.velocity.x; 
       this.position.y += this.velocity.y; 
       this.velocity.x += this.acceleration.x; 
       this.velocity.y += this.acceleration.y; 

       //reset acceleration to 0 
       this.acceleration.x *= 0; 
       this.acceleration.y *= 0; 
      }; 
      Ball.prototype.display = function(){ 
       //here is the problem somewhere i think. 
       ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
       ctx.beginPath(); 
       ctx.fillStyle = 'rgb(255,0,0)'; 
       ctx.arc(this.position.x,this.position.y,this.radius,0, Math.PI*2); 
       ctx.fill(); 
      }; 

      Ball.prototype.checkBorders = function(){ 
       if(this.position.x > ctx.canvas.width-(this.radius/2)){ 
        this.velocity.x = this.velocity.x *-1; 
       } else if (this.position.x < 0){ 
        this.velocity.x *= -1; 
       } 
       if (this.position.y > ctx.canvas.height-(this.radius/2)){ 
        this.velocity.y *= -1; 
       } else if(this.position.y < 0){ 
        this.velocity.y *= -1; 
       } 
      }; 

      Ball.prototype.checkMaxSpeed = function(){ 
       if(this.velocity.x > 0.5){ 
        this.velocity.x = 0.5; 
       } 
       if(this.velocity.x < -0.5){ 
        this.velocity.x = -0.5; 
       } 
       if(this.velocity.y > 0.5){ 
        this.velocity.y = 0.5; 
       } 
       if(this.velocity.y < -0.5){ 
        this.velocity.y = -0.5; 
       } 
      }; 

      var arrayOfBalls = []; 

      for(var i=0;i<=3;i++){ 
       arrayOfBalls.push(new Ball(Math.random()*100,Math.random()*100,Math.random()*100)); 
      } 


      var animate = function(){ 


       for(var j = arrayOfBalls.length-1; j>= 0; j--){ 
       arrayOfBalls[j].checkBorders(); 
       arrayOfBalls[j].checkMaxSpeed(); 
       arrayOfBalls[j].addForce(Math.random(),Math.random()); 
       arrayOfBalls[j].addForce(0,0.00098); 

       arrayOfBalls[j].display(); 
       arrayOfBalls[j].move(); 
       } 
       window.requestAnimationFrame(animate); 

      }; 
      animate(); 
     } 
     } 
    }, 


} 

문제가 각각의 볼에 대한 표시() 함수에서의 clearRect() 호출 내 의견에서 언급 한 바와 같이

Answer 1

. 일반적으로 캔버스는 한 번만 클리어 할 각 프레임 여기에 볼 수 있도록의 clearRect 애니메이션 기능의 상단에 배치 할 수 있습니다 애니메이션/루프 ...

이

var animate = function(){ 

    // Clear the canvas just once each animation frame here 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 

    for(var j = arrayOfBalls.length-1; j>= 0; j--) { 
     arrayOfBalls[j].checkBorders(); 
     arrayOfBalls[j].checkMaxSpeed(); 
     arrayOfBalls[j].addForce(Math.random(),Math.random()); 
     arrayOfBalls[j].addForce(0,0.00098); 

     arrayOfBalls[j].display(); 
     arrayOfBalls[j].move(); 
    } 
    window.requestAnimationFrame(animate); 
};