html5 canvas 实现倒计时 功能

        function showTime(a) {
                var b = {
                    id: "showtime", //canvasid
                    x: 60, //中心点坐标 X轴;
                    y: 60, //中心点坐标 Y轴;
                    radius: 60, //圆的半径
                    angle: 0, //角度 无需设置
                    line 6, //线的宽度
                    backround: "#d65554", //倒计时背景色
                    color: "#e4e4e4", //填充色
                    day: 0,
                    time: 0,
                    minute: 0,
                    seconds: 0
                }
　　　　　　　　　　//若参数有更新则合并
                if (a) {
                    b = $.extend(b, a);
                }
                this.total = 0;
                this.id = b.id;
                this.x = b.x;
                this.y = b.y;
                this.radius = b.radius;
                this.angle = b.angle;
                this.linewidth = b.linewidth;
                this.backround = b.backround;
                this.color = b.color;
                this.time = b.time;
                this.day = b.day;
                this.minute = b.minute;
                this.seconds = b.seconds;
                
                var canvas = document.getElementById(this.id);
                if (canvas == null) {
                    return false;
                }
                var ctx = canvas.getContext("2d");
                
                this.creatText = function() {
                    ctx.fillStyle = "#000";
                    ctx.font = "13px Arial";
                    ctx.fillText("剩余时间", 32, 38);
                    ctx.fillStyle = "#333";
                    if (Number(this.day) > 0) {
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.day), 13, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("天", 38, 75);
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.time), 58, 75);
                        ctx.font = "14px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("小时", 82, 75);
                    } else if (Number(this.time) > 0) {
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.time), 11, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("小时", 33, 75);
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.minute), 61, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("分钟", 84, 75);
                    } else if (Number(this.minute) > 0) {
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.minute), 13, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("分钟", 35, 75);
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.seconds), 65, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("秒", 90, 75);
                    } else if (Number(this.seconds) > 0) {
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr(this.seconds), 40, 75);
                        ctx.font = "13px Arial";
                        ctx.fillStyle = "#333";
                        ctx.fillText("秒", 65, 75);
                        
                    }else{    
                        ctx.font = "22px Arial";
                        ctx.fillStyle = "#000";
                        ctx.fillText(getStr("00:00"), 31, 75);
                    }
                    function getStr(num) {
                        return num.toString().length < 2 ? "0" + num : num;
                    }
                },
                showTime.prototype.creatEle = function() {
                    var _w = canvas.getAttribute("width");
                    var _h = canvas.getAttribute("height");
                    ctx.clearRect(0, 0, _w, _h); //清楚canva绘制区域
                    ctx.save();
                    
                    ctx.restore();
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(-Math.PI / 2)
                    if(this.angle == 360){
                        ctx.fillStyle = this.color;
                    }else{
                        ctx.fillStyle = this.backround;
                    }
                    
                    ctx.beginPath();
                    ctx.arc(0, 0, this.radius-0.5, Math.PI / 180 * 0, Math.PI * 2, true);
                    ctx.lineTo(0, 0);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                    ctx.save();
                    
                    ctx.translate(this.x, this.y);
                    ctx.rotate(-Math.PI / 2)
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    
                    ctx.arc(0, 0, this.radius, Math.PI / 180 * this.angle, Math.PI * 2, true);
                    ctx.lineTo(0, 0);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                    ctx.save();
                    
                    ctx.beginPath();
                    var linew = this.radius - this.linewidth;
                    ctx.arc(this.x, this.y, linew, 0, 2 * Math.PI, true);
                    ctx.closePath();
                    ctx.fillStyle = 'white';
                    ctx.fill();
                    ctx.restore();
                    this.creatText();
                };
                this.creatEle();
            }    
                
                
                
                var countdown = function(startTime, lastTime, nowTime, step) {
                    this.startTime = startTime; //服务器开始时间
                    this.lastTime = lastTime; //服务器到期时间
                    this.nowTime = nowTime; //服务器当前时间
                    this.alltime = this.lastTime - this.startTime; //总时间段
                    this.step = step * 1000; //执行的阶段时间，一般是1秒
                };
                countdown.prototype = {
                    atTime: function(a, b) {
                        //参数说明：a:到期回调方法，b:倒计时回调方法
                        var that = this;
                        //var timeold = parseFloat(Number(that.lastTime) - Number(that.startTime));
                        var timeold = that.lastTime - that.nowTime;
                        var msPerDay = 24 * 60 * 60 * 1000;
                        var e_daysold = timeold / msPerDay;
                        var daysold = Math.floor(e_daysold); //天
                        var e_hrsold = (e_daysold - daysold) * 24;
                        var hrsold = Math.floor(e_hrsold); //小时
                        var e_minsold = (e_hrsold - hrsold) * 60;
                        var minsold = Math.floor((e_hrsold - hrsold) * 60); //分钟
                        var seconds = Math.round((e_minsold - minsold) * 60); //秒
                        var msSeconds = Math.ceil(Math.round(((e_minsold - minsold) * 60 - seconds) * 1000) / 100) * 10;
                        var totaltime = that.lastTime - that.nowTime;
                        var timeangle = 360 - totaltime / (that.alltime / 360);
                        if (msSeconds == 100) {
                            msSeconds = 99;
                        }
                        if (that.nowTime > that.lastTime) {
                            arguments[0]();
                        } else {
                            arguments[1](that.getStr(daysold), that.getStr(hrsold), that.getStr(minsold), that.getStr(seconds), that.getStr(msSeconds),Math.floor(timeangle));
                            that.nowTime = parseInt(that.nowTime) + that.step;
                            window.setTimeout(function() {
                                that.atTime(a,b);
                            }, that.step);
                        }
                    },
                    getStr: function(num) {
                        return num.toString().length < 2 ? "0" + num : num;
                    }
                };

            $(function() {
                var startTime = 1437765600000; //开始时间
                var lastTime =  1437766880000; //结束时间
                var nowTime =   1437766850000; //服务器当前时间
                var showtime = new countdown(startTime, lastTime, nowTime,1)
                showtime.atTime(function(){},function(){
                var one = new showTime({
                        id:"showtime",
                        day:arguments[0],
                        time:arguments[1],
                        minute:arguments[2],
                        seconds:arguments[3],
                        angle:arguments[5]
                    })
                    one.creatEle();
                });
　　　　　　})

以上代码为一个  canvas的倒计时功能，拷贝粘贴即可使用，

使用方法如下:

            $(function() {
                var startTime = 1437765600000; //开始时间
                var lastTime =  1437766880000; //结束时间
                var nowTime =   1437766850000; //服务器当前时间
                var showtime = new countdown(startTime, lastTime, nowTime,1)
                showtime.atTime(function(){},function(){
                var one = new showTime({
                        id:"showtime",
                        day:arguments[0],
                        time:arguments[1],
                        minute:arguments[2],
                        seconds:arguments[3],
                        angle:arguments[5]
                    })
                    one.creatEle();
                });
　　　　　　})

详细设置参数如下：

                    id: "showtime", //canvasid
                    x: 60, //中心点坐标 X轴;
                    y: 60, //中心点坐标 Y轴;
                    radius: 60, //圆的半径
                    angle: 0, //角度 无需设置
                    line 6, //线的宽度
                    backround: "#d65554", //倒计时背景色
                    color: "#e4e4e4", //填充色
                    day: 0, 
                    time: 0,
                    minute: 0,
                    seconds: 0

实现效果如下： 不满一天，显示，小时/分钟，不满一小时显示  分钟/秒  不满一分钟显示 / 秒，不满一秒显示 00:00

代码逻辑比较简单，当然还有很大的优化空间，比较忙暂不做优化，希望能对后来者有所帮助吧。