弧形時鐘每分鐘復位到錯誤的角度

我正在嘗試爲我的網站製作弧形時鐘。總體思路是，當整整一分鐘有一個完整的圓圈，然後重置爲無圈並開始動畫。弧形時鐘每分鐘復位到錯誤的角度

我遇到的問題是它不會重置到正確的位置。

下面是相關代碼：

的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);

來源

2013-12-12 Matt Hirdler

嗯，一個第一個問題是，你正在嘗試使用度，當畫布Context2d採用弧度。您需要將角度轉換爲弧度：

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

顯然您可以簡化一點。

來源

2013-12-12 14:41:01

弧形時鐘每分鐘復位到錯誤的角度

回答

相關問題