畫布-動畫旋轉文本

Question

我需要對此動畫做些什么以使文本與背景圖像一起動畫？

在這里擺弄

我在網上看到了幾個不同的示例，但是它們要么沒有像我一樣旋轉文本（這導致了問題），要么它們沒有解釋解決方案背后的數學原理。

這非常好-http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas，但是它不能很好地理解任何Math函數的使用。

我顯然需要影響這一行：

context.rotate(i * arc);

在編寫文本的循環中，但是我不確定所涉及的數學。

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

我認為您對使用'angle'var的方式感到困惑：實際上，它是保持當前旋轉的var，並且還可以在for循環中使用它來繪制數量（angle + = angleAmount）...只是為了增加它。 幸運的是，您向其中添加了360°，因此它不會產生錯誤。
因此，第一件事是在循環的文本繪圖中停止增加此變量，第二件事是將當前旋轉角度添加到每個文本繪圖中（使用度->弧度轉換）：

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

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

（或進行一些優化： http : //jsfiddle.net/gamealchemist/fwter56k/5/ ）