html5 캔버스에서 원 이동

Question

나는 drawCircle 함수로 html5 캔버스 (this.ctx)에서 원을 그립니다. 이제 Circle 함수를 사용하여 cirlce를 다른 위치로 이동하고 싶습니다. 한 곳에서 다른 곳으로 원이 이동하는 것을 볼 수있는 방법이 있습니까? 이 시점에서 나는 사용자를 위해 이전의 서클을 제거하는 방법조차 모릅니다. 원호에 객체를 할당 할 수 있습니까?

customobject.prototype.drawCircle = function drawCircle(userID, x, y) { 

var radius = 10; 
     this.ctx.beginPath(); 
     this.ctx.arc(100, 00, 10, 0, Math.PI*2, true); 
     this.ctx.closePath(); 
     this.ctx.fillStyle = 'blue'; 
     this.ctx.fill(); 
     this.ctx.lineWidth = 2; 
     this.ctx.strokeStyle = '#003300'; 
     this.ctx.stroke(); 
} 


customobject.prototype.moveCircle = function moveCircle(userID, x, y) { 

} 

내가 잠재적으로 원을 삭제하는 방법을 참조했다 (애니메이션하지 - 이동) :

remove circle(x, y, radius){ 
    this.ctx.globalCompositeOperation = 'destination-out' 
    this.ctx.arc(x, y, radius, 0, Math.PI*2, true); 
    this.ctx.fill(); 
} 

- 나는 원래 원의 좌표를 지정하고 것이이 경우에, 그래서>는 것 자르나요?

나는 동그라미 만들기에 관한 게시물도 this 보았습니다. 하지만 여러 개의 서클에서 어떻게해야하는지 모르겠습니다.

Answer 1

원을 그리면 캔버스에서 원을 제거 할 수 없으므로 배경에 다른 원이 그려지지만 배경색은 설정되어 있지만 다른 원과 충돌 할 수 있습니다. 그려진 개체.

이 권리를 얻는다면 원의 움직임을 움직이게하고 싶습니다. 즉, 기본적으로 그런 식으로 이루어집니다 :

var start = new Date().getTime(), 
    end = start + 1000; //one second of animation 
    p1 = { x: 0, y: 0 }, //start coordinates 
    p2 = { x: 100, y: 10 }; // end coordinates 


function render (progress) { 
    var x = p1.x + progress * (p2.x - p1.x), 
     y = p1.y + progress * (p2.y - p1.y); 

    clearCanvas(); 
    drawCircle(x,y); 
} 

function loop() { 
    var now = new Date().getTime(), 
     progress = (now - start)/(end - start); 

    if (progress >= 0 && progress <= 1) { 
    render(progress); 
    window.requestAnimationFrame(loop); 
    } 
} 

loop(); 

기본 사항 :

1. 당신은 애니메이션 루프, 아니 for 또는 while 루프, 타이머가, setTimeout() 또는 setInterval() 할 것이다 사용하는 뭔가가 필요

   하지만 requestAnimationFrame()을 그런 것들을 위해 만들어진다.

2. 애니메이션에서 진행률을 찾으십시오. 보통 0에서 1 사이의 숫자입니다. 여기서 0은 시작을 나타내고 1은 끝에서부터 끝까지 그리고 진행 사이의 모든 것을 나타냅니다.

3. 캔버스를 지우고 진행 상황에 따라 모든 것을 다시 렌더링하십시오.

4. 진행률이 1보다 커질 때까지 반복합니다.