Canvas - Arc внезапно исчезает

Question

Итак, я делаю базовые часы только для развлечения с помощью минутных и вторых дуг. Однако, после начала новой минуты, минутная дуга быстро исчезает с холста. Зачем?

Вот JSFiddle: https://jsfiddle.net/y0bson6f/

HTML

<canvas id="clock"></canvas> 

CSS

body, 
html { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    font-family: Josefin Sans, Helvetica, sans-serif; 
    background: #1A4978; 
} 

JS

var canvas = document.getElementById('clock'); 
    var context = canvas.getContext('2d'); 

    function setDimensions() { 
     context.canvas.width = window.innerWidth * 0.69; 
     context.canvas.height = window.innerHeight; 
    } 

    setDimensions(); 

    var x = 0.5 * canvas.width; 
    var y = canvas.height/2; 
    var radius = 0.25 * context.canvas.width; 
    var startAngle = 0; 
    var endAngle = 2 * Math.PI; 
    var startAnimationMinuteDone = false; 
    var firstTime = false; 

    function updateMinute(start, end) { 
     if (startAnimationMinuteDone == false && firstTime == false) { 
      context.clearRect(0, 0, canvas.width, canvas.height); 
     } 

     setDimensions(); 
     context.beginPath(); 
     context.strokeStyle = "#FF7519"; 
     context.arc(x, y, radius, start, end); 
     context.lineWidth = 20; 
     context.stroke(); 
     context.closePath(); 
    } 

    function updateSecond(start, end) { 
     context.beginPath(); 
     context.strokeStyle = "#FFA319"; 
     radius = 0.25 * context.canvas.width + 20; 
     context.arc(x, y, radius, start, end); 
     context.stroke(); 
     context.closePath(); 
    } 

    function minuteAntialias(start, end) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     setDimensions(); 
     context.beginPath(); 
     context.strokeStyle = "#1A4978"; 
     context.arc(x, y, radius, start, end); 
     context.lineWidth = 20; 
     context.stroke(); 
     context.closePath(); 
    } 

    function secondAntialias(start, end) { 
     context.beginPath(); 
     context.strokeStyle = "#1A4978"; 
     radius = 0.25 * context.canvas.width + 40; 
     context.arc(x, y, radius, start, end); 
     context.stroke(); 
     context.closePath(); 
    } 

    $(document).ready(function() { 
     var time = 0; 
     var count = 0; 

     function clock() { 
      var date = new Date(); 
      var year = date.getFullYear(); 
      var month = date.getMonth(); 
      var day = date.getDay(); 
      var hour = date.getHours(); 

      if (hour > 12) { 
       hour -= 12; 
      } 

      var minute = date.getMinutes(); 
      var second = date.getSeconds(); 

      var newestMinuteStart = (time + 1.5) * Math.PI; 
      var newestSecondStart = (time + 1.5) * Math.PI; 

      var cachedTime; 

      if (count <= minute/30 && !startAnimationMinuteDone) { 
       time += 0.01; 
       updateMinute(1.5 * Math.PI, (time + 1.5) * Math.PI); 
       count += 0.01; 
       cachedTime = time; 

      } else if (!startAnimationMinuteDone) { 
       time = 0; 
       count = 0; 
       startAnimationMinuteDone = true; 

      } else if (count <= second/30 || second == 0 && startAnimationMinuteDone) { 
       time += 0.01; 
       updateSecond(1.5 * Math.PI, (time + 1.5) * Math.PI); 
       secondAntialias(0, 2 * Math.PI); // Arc matching background colour gives the effect of greater sharpness 
       count += 0.01; 

       if (second == 0) { 
        context.clearRect(0, 0, canvas.width, canvas.height); 
        startAnimationMinuteDone = false; 
        firstTime = true; 
        time = 0; 
        count = 0; 
       } 

       console.log(second); 
       console.log(startAnimationMinuteDone); 
      } 
     } 

     setInterval(clock, 10); 
    }); 

Answer 1

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

var can = document.getElementById('canvas'); 
var ctx = can.getContext('2d'); 
var width = can.width; 
var height = can.height; 

// because arc start at an angle of 0 rad or 0 deg you have to rotate/translate the canvas so that they start at an angle of PI/2 rad or 90 deg 
ctx.rotate(-degtorad(90)); 
ctx.translate(-width,0); 

var x = width*0.5; 
var y = height*0.5; 

var minradius = width*0.45; 
var secradius = width*0.25; 

function degtorad(deg){ return deg*(Math.PI/180); } 

function updateMinute(start, end) { 
    ctx.beginPath(); 
    ctx.strokeStyle = "#FFA319"; 
    ctx.arc(x, y, minradius, start, end); 
    ctx.stroke(); 
    ctx.closePath(); 
} 

function updateSecond(start, end) { 
    ctx.beginPath(); 
    ctx.strokeStyle = "#1A4978"; 
    ctx.arc(x, y, secradius, start, end); 
    ctx.stroke(); 
    ctx.closePath(); 
} 

setInterval(function(){ 

    var date = new Date(); 
    var min = date.getMinutes(); 
    var sec = date.getSeconds(); 

    var secdeg = sec*6; 
    var mindeg = min*6; 

    console.log('secdeg: ',secdeg, sec); 
    console.log('mindeg: ',mindeg, min); 

    ctx.clearRect(0, 0, width,height); 

    updateMinute(0,degtorad(mindeg)); 
    updateSecond(0,degtorad(secdeg)); 


},1000); 

HTML:

<canvas id="canvas" width="300" height="300"></canvas>