Question

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

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

以下是相关代码：

使用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);

Answer 1

好吧，第一个问题是当Canvas Context2d使用弧度时你正在尝试使用度数。您需要将角度转换为弧度：

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

显然你可以简化一下。

弧形时钟每分钟将自身重置到错误的程度

1 个答案: