캔버스 - 회전 된 텍스트 애니메이션

Question

텍스트를 배경 이미지와 함께 애니메이트하려면이 애니메이션을 어떻게해야합니까?

Fiddle here

나는 온라인으로 다른 몇 가지 예를 보았다하지만 중 하나 그들은 텍스트 나처럼 (문제의 원인이되는)하거나 솔루션 뒤에 수학을 설명하지 않는 회전이 없습니다.

이것은 매우 좋습니다. 그러나 수학 함수 사용에 대한 훌륭한 통찰력은 제공하지 않습니다.

나는 분명히 선에 영향을해야합니다 텍스트를 기록하는 루프에서

context.rotate(i * arc); 

을하지만 관련된 수학의 확신입니다. 이 사실 현재의 회전을 보유하고있는 VAR, 그리고 당신이 또한이를 그립니다 for 루프에서 사용 :

var cvs = document.getElementById("cvs"); 
var context = cvs.getContext("2d"); 
var height = 400, 
    width = 400, 
    spinning = false, 
    angle = 0, 
    awards = [100,200,300,400,500,600,700,800,900,1000,1100,1200], 
    segmentCount = 12, 
    angleAmount = 30, 
    arc = Math.PI/6, 
    image = new Image(); 
    image.src = 'http://placehold.it/400x400'; 

function draw() { 

    // clear 
    context.clearRect(0,0,width,height); 

    // rotate whole wheel here? 
    context.save(); 

    context.translate(height/2, width/2); 
    context.rotate(angle * (Math.PI/180)); 
    context.drawImage(image,-width/2,-height/2);   
    context.restore(); 

    // draw the prize amount text 
    for(var i = 0; i < segmentCount; i++){ 
     context.save(); 
     context.translate(height/2, width/2); 
     context.font = "bold 18px sans-serif"; 
     context.textAlign = "end"; 
     context.rotate(i * arc); 
     context.fillStyle = "#000000"; 
     context.textBaseline = 'middle'; 
     context.fillText(awards[i],145,0); 
     context.restore(); 
     angle += angleAmount; 
    } 
} 

function update(){ 
    draw(); 
    angle += 5; 
    setTimeout(update,1000/30); 
} 

image.onload = update; 

Answer 1

나는 당신이 '각도'VAR를 사용하는 방법에 의해 혼동를 얻었다 고 생각 amount (angle + = angleAmount) ... 그냥 늘리십시오. 운 좋게도 360 °를 추가하면 버그가 생성되지 않습니다.
그래서 먼저 루프에 대한 텍스트 드로잉이 VAR 증가 중지하는 것, 두 번째 것은 (a 학위 -> RAD 변환하여) 각 텍스트 그리 현재 회전 각도를 추가하는 것이다

context.rotate((i * angleAmount + angle) * (Math.PI/180)); 

http://jsfiddle.net/gamealchemist/fwter56k/4/

(또는 최적화 비트 : http://jsfiddle.net/gamealchemist/fwter56k/5/)