JS + HTML 5 （Canvas） - 画圆饼动画，也是countdown倒计时的简单实现。

代码及结果预览，在 JSFiddle 上：http://jsfiddle.net/ylem/XnsCK/

代码很简单，给大伙一个范例，其中把 n = 10 修改为 60 就算是简单的倒计时了。 原理一句话，就是 每秒画 step / n 的圆。

如果对canvas画圈不熟的同学可以看这里：http://www.w3school.com.cn/html5/canvas_arc.asp

var canvas = document.getElementById('canvasid'),
    width = canvas.width,
    height = canvas.height,
    ctx = canvas.getContext('2d');

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,
    startAngle = 0,
    endAngle = 0;

var animation_interval = 1000,
    n = 10; // count of arc

var animation = function () {
    if (step <= n) {
        endAngle = step * 2 * Math.PI / n;
        drawArc(startAngle, endAngle);
        step++;
    } else {
        clearInterval(varName);
    }
};

setInterval(animation, animation_interval);