javascript - HTML5旋转圈

Question

我正在尝试在 Canvas 上旋转一个圆圈，我想我已经得到了大部分代码，但我不知道代码有什么问题，圆圈没有旋转。我需要创建另一个函数才能旋转圆圈吗？有什么建议

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

您需要更改循环内的 Angular

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

另外，您想在绘制圆圈之前清除 Canvas 吗？

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