CLOCK – real time – Wang Daniel

<!DOCTYPE html>
<html>

<p>
<button onclick="myMove()">Click Me</button> 
</p>

<canvas id="My_canvas" width="300" height="300" style="border:1px solid #e1e1e1;"></canvas>

<script>

function clock_step_action() {
    var now = new Date();
    var cv2d = document.getElementById('My_canvas').getContext('2d');
    const canWid = 300  ; //cv2d.scrollWidth;
    var zoom_scale = canWid /150;         //2.0;
    cv2d.save();
    cv2d.clearRect(0, 0, 150*zoom_scale, 150*zoom_scale);
    cv2d.translate(75*zoom_scale, 75*zoom_scale);
    cv2d.scale(0.4, 0.4);
    cv2d.rotate(-Math.PI / 2);
    cv2d.strokeStyle = 'grey';
    cv2d.fillStyle = 'white';
    cv2d.lineWidth = 3;
    cv2d.lineCap = 'round';
  
    // Hour marks
    cv2d.save();
    for (var i = 0; i < 12; i++) {
      cv2d.beginPath();
      cv2d.rotate(Math.PI / 6);
      cv2d.moveTo(105*zoom_scale, 0);
      cv2d.lineTo(120*zoom_scale, 0);
      cv2d.stroke();
    }
    cv2d.restore();
  
    // Minute marks
    cv2d.save();
    cv2d.lineWidth = 5;
    for (i = 0; i < 60; i++) {
      if (i % 5!= 0) {
        cv2d.beginPath();
        cv2d.moveTo(117*zoom_scale, 0);
        cv2d.lineTo(120*zoom_scale, 0);
        cv2d.stroke();
      }
      cv2d.rotate(Math.PI / 30);
    }
    cv2d.restore();
  
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hr  = now.getHours();
    hr = hr >= 12 ? hr - 12 : hr;
  
    cv2d.fillStyle = 'black';
    //cv2d.fillStyle = 'gold';

  
    // write Hours
    cv2d.save();
    cv2d.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
    cv2d.lineWidth = 21;
    cv2d.beginPath();
    cv2d.moveTo(-20*zoom_scale, 0);
    cv2d.lineTo(80*zoom_scale, 0);
    cv2d.stroke();
    cv2d.restore();
  
    // write Minutes
    cv2d.save();
    cv2d.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
    cv2d.lineWidth = 5 *zoom_scale;
    cv2d.beginPath();
    cv2d.moveTo(-28*zoom_scale, 0);
    cv2d.lineTo(112*zoom_scale, 0);
    cv2d.stroke();
    cv2d.restore();
  
    // Write seconds
    cv2d.save();
    cv2d.rotate(sec * Math.PI / 30);
    cv2d.strokeStyle = '#DAD000';
    cv2d.fillStyle = '#DAD000';
    cv2d.lineWidth = 2 *zoom_scale;
    cv2d.beginPath();
    cv2d.moveTo(-30*zoom_scale, 0);
    cv2d.lineTo(123*zoom_scale, 0);
    cv2d.stroke();
    cv2d.beginPath();
    cv2d.arc(0, 0, 10*zoom_scale, 0, Math.PI * 2, true);
    cv2d.fill();
    cv2d.beginPath();
    cv2d.arc(92*zoom_scale, 0, 10*zoom_scale, 0, Math.PI * 2, true); //ball
    cv2d.stroke();
    cv2d.fillStyle = 'rgba(0, 0, 0, 0)';
    cv2d.arc(0, 0, 3*zoom_scale, 0, Math.PI * 2, true);
    cv2d.fill();
    cv2d.restore();
  
    cv2d.beginPath();
    cv2d.lineWidth = 5 * zoom_scale;
    cv2d.strokeStyle = '#DDAADD';
    cv2d.arc(0, 0, 142*zoom_scale, 0, Math.PI * 2, true);
    cv2d.stroke();
  
    cv2d.restore();
  
    window.requestAnimationFrame(clock_step_action);
  }
  
  window.requestAnimationFrame(clock_step_action);

</script>

</body>
</html>