어떻게 캔버스에 애니메이션을 복사합니까

Question

반원의이 애니메이션을 그렸습니다. 기본적으로이 애니메이션을 복사하고 60px 아래로 복사 한 다음 새로운 하나의 지연을 추가하기를 원합니다. 에 "B"

<canvas id="thecanvas"></canvas> 

다음 스크립트

var can = document.getElementById('thecanvas'); 
ctx = can.getContext('2d'); 
can.width = window.innerWidth; 
can.height = window.innerHeight; 

window.drawCircle = function (x, y) { 
    segments = 90, /* how many segments will be drawn in the space */ 
    currentSegment = 0, 
    toRadians = function (deg) { 
     return (Math.PI/180) * deg; 
    }, 
    getTick = function (num) { 
     var tick = toRadians(180)/segments; /*360=full, 180=semi, 90=quarter... */ 
     return tick * num; 
    }, 
    segment = function (end) { 
     end = end || getTick(currentSegment); 
     ctx.clearRect(0, 0, can.width, can.height); 
     ctx.beginPath(); 
     ctx.arc(x, y, 60, (1.5 * Math.PI), end + (1.5 * Math.PI), false); 
     ctx.stroke(); 
     ctx.closePath(); 
    }; 

    ctx.lineWidth = 5; 
    ctx.strokeStyle = 'rgba(0,0,0,0.5)'; 

    setTimeout(function render() { 
     segment(getTick(currentSegment)); 
     currentSegment += 1; 
     if (currentSegment < segments) { 
      setTimeout(render, 5); 
     } else { 
      currentTick = 0; 
     } 
    }, 250); 
}; 
drawCircle(100, 100); 

는 바이올린에게 있습니다

HTML을 그립니다 http://jsfiddle.net/zhirkovski/bJqdN/

Answer 1

먼저 setTimeout 함수를 drawCircle 메서드 외부에 배치 할 수 있습니다.

1. 1 무승부의 말에 파견 할 것 "endDraw"이벤트를 만들 :

   그런 다음 당신은 적어도 2 가지 옵션이 있습니다. 이 이벤트가 처리되면 drawCircle 메서드를 다시 호출하면됩니다. 이를 달성하기 위해서는 물론 첫 번째 drawCircle을 호출하는 주 방법이 필요합니다.

2. 더 나은 솔루션을 만들기 위해 호출의 워크 플로를 설명 할 수 있습니다. 즉, 호출하는 방법의 목록을 설명하고 각 시작 프레임 :

   당신의 주요 타이머는 무엇을 호출 알이 배열을 사용하도록 구성됩니다

   var workflow = [{method:"drawCircle", frame:0, x:100, y:100},  //the first half circle at the frame 0, x=100, y=100 
          {method:"drawCircle", frame:1000, x:100, y:190}]; //the second half circle starting at frame 1000, x=100, y=190