<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #666"></canvas>
var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height
function drawArc(s, e) {
var x = width / 2, // center x
y = height / 2, // center y
radius = 100,
counterClockwise = false;
ctx.fillStyle = '#0e6000';
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, radius, s, e, counterClockwise);
ctx.fill();
}
var step = 1, //相当于是1弧度 = 180°/π;
startAngle = 0,
endAngle = 0;
var animation_interval = 100,
n = 60; // count of arc 把圆拆分为多少块来做动画~
var animation = function() {
if (step <= n) {
endAngle = step * 2 * Math.PI / n;
console.log("endAngle",endAngle)
drawArc(startAngle, endAngle);
console.log("n",n)
console.log("step",step)
step++;
} else {
clearInterval(animation);
}
};
setInterval(animation, animation_interval);