HTML5自旋圈

Question

我正在嘗試在畫布上旋轉一個圓圈，我想我已經掌握了大部分代碼，但是我不知道代碼出了什么問題，圓圈沒有旋轉。 我是否需要創建另一個函數來旋轉圓圈？ 有什么建議么

http://jsfiddle.net/qY85C/1/

var angle = 0;
function convertToRadians(degree) {
return degree*(Math.PI/180);
}

function incrementAngle() {
   angle++;
   if(angle > 360) {
    angle = 0;
   }
}

var myColor = ["#ECD078","#D95B43"];
var myData = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];

function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
    myTotal +=  myData[j];       
}
return myTotal;
}

function drawColoredCircle() {
var lastend = 0;
var myTotal = getTotal();//160

for (var i = 0; i < myData.length; i++) {
    ctxBg.fillStyle = myColor[i%2];
    ctxBg.translate(canvasBg.width/2, canvasBg.width/2);
    ctxBg.rotate(convertToRadians(angle));
    ctxBg.translate(-canvasBg.width/2, -canvasBg.width/2);
    ctxBg.beginPath();
    ctxBg.moveTo(canvasBg.width/2,canvasBg.width/2);
    ctxBg.arc(canvasBg.width/2,canvasBg.height/2,500,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
    ctxBg.lineTo(canvasBg.width/2,canvasBg.height/2);
    ctxBg.fill();
    lastend += Math.PI*2*(myData[i]/myTotal);

}
}

function loop(){
    drawColoredCircle();
    requestAnimFrame(loop);
}

Answer 1

您需要更改循環內的角度

function loop(){
    angle+=Math.PI/18000;
    drawColoredCircle();
    requestAnimFrame(loop);
}

另外，是否要在繪制圓之前清除畫布？

function loop(){
    ctxBg.clearRect(0,0,canvasBg.width,canvasBg.height);
    angle+=Math.PI/18000;    
    drawColoredCircle();
    requestAnimFrame(loop);
}