canvas 实现圆环效果

var race = document.getElementById(‘race’);
var cxt = race.getContext(‘2d’);

var ang = 0;
var speed = 1;
var sAng = 0;

function draw() {
cxt.save();

cxt.translate(300, 300);

cxt.save();
cxt.beginPath();
cxt.fillStyle = ‘#CCA548’;
cxt.arc(0, 0, 220, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();
cxt.restore();

cxt.save();
cxt.beginPath();
cxt.fillStyle = ‘white’;
cxt.arc(0, 0, 200, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();
cxt.restore();

cxt.save();
cxt.rotate(ang*Math.PI/180);
ang += speed;
//speed += 1;
cxt.fillStyle = ‘#CDC9A5’;
cxt.fillRect(210, -40, 40, 80);
cxt.strokeRect(210, -40, 40, 80);

cxt.fillStyle = ‘white’;
cxt.fillRect(230, -20, 10, 10);
cxt.fillRect(230, 10, 10, 10);

cxt.save();
cxt.translate(210, -20);
cxt.fillStyle = ‘#000’;
cxt.beginPath();
cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();

cxt.fillStyle = ‘white’;
cxt.beginPath();
cxt.arc(0, 0, 2, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();

cxt.save();
if(sAng > 360){
sAng = 0;
}
cxt.rotate(sAng*Math.PI/180);
sAng += 4;
cxt.strokeStyle = ‘white’;
cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));
cxt.restore();

cxt.restore();

cxt.save();
cxt.translate(210, 20);
cxt.fillStyle = ‘#000’;
cxt.beginPath();
cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();

cxt.save();
cxt.rotate((sAng+45)*Math.PI/180);
cxt.strokeStyle = ‘white’;
cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));
cxt.restore();

cxt.restore();

cxt.beginPath();
cxt.arc(210, 20, 2, 0, 360*Math.PI/180, false);
cxt.fill();
cxt.closePath();

cxt.restore();

cxt.restore();
}

//draw();

function animate() {

cxt.clearRect(0, 0, 600, 600);
draw();

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);