Часы в холсте

Question

Я сделал часы в холсте, я на самом деле рисую линии на холсте из центра, каждую секунду я рисую линию из центра по кругу, я заканчиваю секундную линию на все часы. как очистить ранее нарисованную линию, чтобы она выглядела как настоящие часы.

Помощь высоко ценится спасибо

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
for (i = 0; i < 360; i += 10) { 
 
    ctx.moveTo(i + 5, 180); 
 
    ctx.lineTo(i, 180); 
 

 
} 
 
for (i = 0; i < 360; i += 10) { 
 
    ctx.moveTo(180, i + 5); 
 
    ctx.lineTo(180, i); 
 

 
} 
 

 
ctx.stroke(); 
 

 
var iSin = 0, 
 
    counterSin = 0, 
 
    xSin = 180, 
 
    ySin = 0; 
 
var iCos = 0, 
 
    counterCos = 0, 
 
    xCos = 0, 
 
    yCos = 180; 
 
var iCircle = 0, 
 
    counterCircle = 0, 
 
    xCircle = 180, 
 
    yCircle = 0; 
 
var iLinesInCircle = 0, 
 
    counterLinesInCircle = 0, 
 
    xLinesInCircle = 180, 
 
    yLinesInCircle = 0; 
 
var iMinutes = 0, 
 
    counterMinutes = 0, 
 
    xMinutes = 180, 
 
    yMinutes = 0; 
 
var iHours = 0, 
 
    counterHours = 0, 
 
    xHours = 180, 
 
    yHours = 0; 
 
var increase = 90/180 * Math.PI/9; 
 
var increaseLinesInCircle = 6 * Math.PI/180; 
 
var increaseMinutes = 6 * Math.PI/180; 
 
var increaseHours = 6 * Math.PI/180; 
 
//drawSineWave(); 
 
//drawCosineWave(); 
 
//drawCircle(); 
 
drawLinesInCircle(); 
 
drawMinutes(); 
 
drawHours(); 
 

 
function drawSineWave() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = ("#0C620B"); 
 
    ctx.lineWidth = 1; 
 
    ctx.moveTo(xSin, ySin); 
 
    xSin = 180 + Math.sin(counterSin) * 180; 
 
    ySin = iSin; 
 
    counterSin += increase; 
 
    ctx.lineTo(xSin, ySin); 
 
    ctx.stroke(); 
 
    iSin += 10; 
 
    if (iSin <= 360) { 
 
    setTimeout(drawSineWave, 100); 
 
    } 
 
} 
 

 

 
function drawCosineWave() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = ("#BE1616"); 
 
    ctx.lineWidth = 1; 
 
    ctx.moveTo(xCos, yCos); 
 
    xCos = iCos; 
 
    yCos = 180 - Math.cos(counterCos) * 180; 
 
    counterCos += increase; 
 
    ctx.lineTo(xCos, yCos); 
 
    ctx.stroke(); 
 
    iCos += 10; 
 
    if (iCos <= 360) { 
 
    setTimeout(drawCosineWave, 100); 
 
    } 
 
} 
 

 
function drawCircle() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = ("#021A02"); 
 
    ctx.lineWidth = 1; 
 
    ctx.moveTo(xCircle, yCircle); 
 
    xCircle = 180 + Math.sin(counterCircle) * 180; 
 
    yCircle = 180 - Math.cos(counterCircle) * 180; 
 
    counterCircle += increase; 
 
    ctx.lineTo(xCircle, yCircle); 
 
    ctx.stroke(); 
 
    iCircle += 10; 
 
    if (iCircle <= 360) { 
 
    setTimeout(drawCircle, 100); 
 
    } 
 
} 
 

 
function drawLinesInCircle() { 
 

 
    var ctxline = c.getContext("2d"); 
 
    //ctxline.restore(); 
 
    ctxline.beginPath(); 
 
    ctxline.strokeStyle = ("#EDDE54"); 
 
    ctxline.lineWidth = 1; 
 
    ctxline.moveTo(180, 180); 
 
    xLinesInCircle = 180 + Math.sin(counterLinesInCircle) * 180; 
 
    yLinesInCircle = 180 - Math.cos(counterLinesInCircle) * 180; 
 
    counterLinesInCircle += increaseLinesInCircle; 
 
    ctxline.lineTo(xLinesInCircle, yLinesInCircle); 
 
    ctxline.stroke(); 
 
    //ctxline.clearRect(0,0,360,360); 
 
    iLinesInCircle += 6; 
 
    if (iLinesInCircle <= 360) { 
 
    setTimeout(drawLinesInCircle, 1000); 
 
    } 
 
} 
 

 
function drawMinutes() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = ("#545EED"); 
 
    ctx.lineWidth = 5; 
 
    ctx.moveTo(180, 180); 
 
    xMinutes = 180 + Math.sin(counterMinutes) * 160; 
 
    yMinutes = 180 - Math.cos(counterMinutes) * 160; 
 
    counterMinutes += increaseMinutes; 
 
    ctx.lineTo(xMinutes, yMinutes); 
 
    ctx.stroke(); 
 
    iMinutes += 6; 
 
    if (iMinutes <= 360) { 
 
    setTimeout(drawMinutes, 60000); 
 
    } 
 
} 
 

 
function drawHours() { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = ("#BE1616"); 
 
    ctx.lineWidth = 7; 
 
    ctx.moveTo(180, 180); 
 
    xHours = 180 + Math.sin(counterHours) * 120; 
 
    yHours = 180 - Math.cos(counterHours) * 120; 
 
    counterHours += increaseHours; 
 
    ctx.lineTo(xHours, yHours); 
 
    ctx.stroke(); 
 
    iHours += 6; 
 
    if (iHours <= 360) { 
 
    setTimeout(drawHours, 3600000); 
 
    } 
 
}

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

Answer 1

Проще было бы, наверное, первым сделать ту же линию в BackgroundColor холста, а затем нарисуйте следующую строку.

Answer 2

Имейте один глобальный тайм-аут, который тикает каждую секунду и увеличивает число глобальных переменных, которые отслеживают, сколько секунд, минут и часов прошло.

Что-то концептуально, как это ... (не тестировалось)

var second = 0; 
var minute = 0; 
var hour = 0; 

setTimeout(tick, 1000); 

function tick() { 

    // Clear the canvas 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    // Draw the clock background or anything else first 
    drawBackground(); 

    // Increment the seconds and check if a minute has been reached 
    if (++second == 60) { 

     // Increment the minutes and check if an hour has been reached 
     if (++minute == 60) { 

      // Increment the hours and check if it has reached 12 again 
      if (++hours == 12) { 
       hour = 0; 
      } 
      // Overlay the hour hand, using the hours variable 
      drawHourHand(hour); 

      // Reset the minute counter 
      minute = 0; 
     } 

     // Overlay the minute hand, using the minutes variable 
     drawMinuteHand(minute); 

     // Reset the second counter 
     second = 0; 
    } 

    // Overlay the second hand, using the seconds variable 
    drawSecondHand(second); 
} 

Вы затем глобальный контроль над вашими таймингов с одного места, и каждый раз, когда часы тикают вы перерисовки элементов на холсте в их новых местах.

Вам необходимо подключить временные переменные к вашим функциям рисования, чтобы они непосредственно использовались для вычисления угла, на котором рука должна лежать на лицевой стороне часа.

function drawSecondHand(seconds) { 
    var degrees = seconds * 6; 
    // Convert to radians and draw your line, etc... 
} 

В приведенной выше функции, вы вычисление степеней угла линии с использованием секунд переменных, которая исходит от вашего глобального времени.

1 second = 6 degrees 
2 second = 12 degrees 
3 second = 18 degrees 
... 
58 second = 348 degrees 
59 second = 354 degrees 
60 second (reset to 0 second) = 0 degrees 
1 second = 6 degrees 
2 second = 12 degrees 
... 

Answer 3

У вас должна быть основная функция, которая вызывает каждую функцию в вашем скрипте. Эта функция должна очищаться каждый раз на экране.

Например:

/* 

    Your script here 

        */ 

function draw() { 
    ctx.save(); 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 

    //draw 
    drawSineWave(); 
    drawCircle(); 
    drawLinesInCircle() 
    drawMinutes(); 
    drawHours(); 


    ctx.restore(); 
} 
var animateInterval = setInterval(draw,0); 

Позвольте мне знать, если это работает для вас