Javascript 相对弧画布到秒计时器

如何使计时器和圆弧之间相对应我需要圆从0度开始到360度取决于时间秒数：

---

那么，有谁能帮助我如何使用画布？ 注意：我不喜欢使用现成的插件

（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={'date'：null}；
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
if（eventDate div）{
位置：绝对位置；
顶部：100px；
左：95px；
文本对齐：居中；
}
.秒，span{
字体大小：16px；
}

00
秒
00
会议记录
00
小时
00
天

试试看

CSS

<style>
    .countdown-container{   
        width: 250px;
        position: absolute;
        height: 250px;
        top: 0;
        left: 0;
        text-align: center;
        padding-top: 50px;
    }
    #countdown{    
        position: relative;
    }

</style>

<script>
    (function ($) {
        jQuery.fn.countdown = function (options, callback) {
            var settings = {'date': null};
            if (options) {
                $.extend(settings, options);
            }
            this_sel = $(this);
            function count_exec() {
                eventDate = Date.parse(settings['date']) / 1000;
                currentDate = Math.floor($.now() / 1000);
                if (eventDate <= currentDate) {
                    callback.call(this);
                    clearInterval(interval);
                }
                seconds = eventDate - currentDate;
                days = Math.floor(seconds / (60 * 60 * 24));
                seconds -= days * 60 * 60 * 24;
                hours = Math.floor(seconds / (60 * 60));
                seconds -= hours * 60 * 60;
                minutes = Math.floor(seconds / 60);
                seconds -= minutes * 60;

                // add 0 value to left of value
                if (!isNaN(eventDate)) {
                    this_sel.find('.days').text(days);
                    this_sel.find('.hours').text(hours);
                    this_sel.find('.mins').text(minutes);
                    this_sel.find('.secs').animate({'font-size': '100px'}, 1000).text(seconds);
                }
            }
            count_exec();
            interval = setInterval(count_exec, 1000);

            /*Canvas JavaScript*/
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 70;

            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.lineWidth = 8;
            context.strokeStyle = '#14E170';
            context.stroke();
        };
    })(jQuery);
    $(document).ready(function () {
        $("#countdown").countdown({
            date: "6 january 2017 7:15:00"
        },
                function () {
                    $("#countdown").text("merry christmas");
                }
        );

    })
</script>

.倒计时容器{
宽度：250px；
位置：绝对位置；
高度：250px；
排名：0；
左：0；
文本对齐：居中；
填充顶部：50px；
}
#倒计时{
位置：相对位置；
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
    <div class="countdown-container">
        <div class="secs">
            00
        </div>
        <span>Seconds</span>
    </div>
    <canvas id="myCanvas" width="250" height="250"></canvas>
</div>

00
秒

JS

<style>
    .countdown-container{   
        width: 250px;
        position: absolute;
        height: 250px;
        top: 0;
        left: 0;
        text-align: center;
        padding-top: 50px;
    }
    #countdown{    
        position: relative;
    }

</style>

<script>
    (function ($) {
        jQuery.fn.countdown = function (options, callback) {
            var settings = {'date': null};
            if (options) {
                $.extend(settings, options);
            }
            this_sel = $(this);
            function count_exec() {
                eventDate = Date.parse(settings['date']) / 1000;
                currentDate = Math.floor($.now() / 1000);
                if (eventDate <= currentDate) {
                    callback.call(this);
                    clearInterval(interval);
                }
                seconds = eventDate - currentDate;
                days = Math.floor(seconds / (60 * 60 * 24));
                seconds -= days * 60 * 60 * 24;
                hours = Math.floor(seconds / (60 * 60));
                seconds -= hours * 60 * 60;
                minutes = Math.floor(seconds / 60);
                seconds -= minutes * 60;

                // add 0 value to left of value
                if (!isNaN(eventDate)) {
                    this_sel.find('.days').text(days);
                    this_sel.find('.hours').text(hours);
                    this_sel.find('.mins').text(minutes);
                    this_sel.find('.secs').animate({'font-size': '100px'}, 1000).text(seconds);
                }
            }
            count_exec();
            interval = setInterval(count_exec, 1000);

            /*Canvas JavaScript*/
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 70;

            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.lineWidth = 8;
            context.strokeStyle = '#14E170';
            context.stroke();
        };
    })(jQuery);
    $(document).ready(function () {
        $("#countdown").countdown({
            date: "6 january 2017 7:15:00"
        },
                function () {
                    $("#countdown").text("merry christmas");
                }
        );

    })
</script>

（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={'date'：null}；
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
如果（事件日期
（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={'date'：null}；
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
如果（eventDate尝试此操作，它将帮助您实现度增量，您可以通过将代码
上下文.arc（centerX，centerY，radius，1.5*Math.PI，1.5*Math.PI+kk，false）中的
false
替换为
true
来更改旋转方向；


（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布JavaScript*/
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var-kk=0；
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
如果（eventDate尝试此方法，也会对您有所帮助


（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布JavaScript*/
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var-kk=0；
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
如果（eventDate我希望这是您所需要的，请试试这个


（函数（$）{
风险值日期=新日期（“2017-01-30”）；
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布JavaScript*/
var canvas=document.getElementById（'myCanvas'）；
var canvas1=document.getElementById（'myCanvas1'）；
var canvas2=document.getElementById（'myCanvas2'）；
var canvas3=document.getElementById（'myCanvas3'）；
var context=canvas.getContext（'2d'）；
var context1=canvas1.getContext（'2d'）；
var context2=canvas2.getContext（'2d'）；
var context3=canvas3.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var sec_arc_end=0，
最小弧长=0，
小时弧结束=0，
日弧结束=0；
函数计数_exec（）{
eventDate=Date.parse（日期）/1000；
currentDate=Math.floor（$.now（）/1000）；
if（eventDate非常感谢您对我的帮助，因此我需要构建类似于此循环倒计时的倒计时计时器：请参见此处并从您的本地运行代码。哦，它工作得非常好。您能否帮助我如何设置计时器数字的动画例如：非常感谢您的帮助：）请提出一个关于你需要的新问题，并通过接受正确的答案来结束这个问题。谢谢你的努力。如果你有时间，你可以这样做吗