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 arcvar animation = function () {    if (step <= n) {        endAngle = step * 2 * Math.PI / n;        drawArc(startAngle, endAngle);        step++;    } else {        clearInterval(varName);    }};setInterval(animation, animation_interval);