弧钟每分钟都会将自己重置到错误的程度

Arc clock resetting itself to the wrong degree each minute

本文关键字:错误 程度 自己 每分钟      更新时间:2023-09-26

我正在为我的网站制作一个弧形时钟。一般的想法是,当它已经满一分钟时,就会有一个完整的圆圈,然后它会重置为无圆圈并开始设置动画。

我遇到的问题是它不会重置到正确的位置。

以下是相关代码:

Javascript:

    setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // begin custom shape
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    //secondValue = ((-.5 * Math.PI)*(60-seconds)/60);
    ctx.beginPath();
    ctx.arc(c.width/2,c.height/2,100,(360),((360/60)*seconds),false);
    ctx.lineWidth = 10;
    // line color
    ctx.strokeStyle = 'white';
    ctx.stroke();
    // bind event handler to clear button
    document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }, false);

    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  
}, 1000);

当Canvas Context2d使用弧度时,第一个问题是您试图使用度。您需要将角度转换为弧度:

ctx.arc(c.width/2,c.height/2,100,(360) * (Math.PI / 180),
        ((360/60) * (Math.PI / 180) *seconds),false);

显然,你可以稍微简化一下。