topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-code-07-clock.htm / htm


  <html>
  <head>
    <title>Canvas Clock Demo</title>
  <script>
  // Wait for the browser to load
  window.onload = function() {
    // Draw the clock
    clock();
  
    // and re-draw the clock every second thereafter
    setInterval(clock, 1000);
  };
  
  function clock() {
    // Get the current date and time
    var now = new Date();
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hr  = now.getHours();
    hr = hr >= 12 ? hr - 12 : hr;
  
    // Get the drawing context of the canvas element
    var ctx = document.getElementById('canvas').getContext('2d');
  
    ctx.save();
      // Initalize the drawing canvas
      ctx.clearRect(0,0,150,150);
  
      // When we draw at 0,0 we're actually drawing at 75,75
      ctx.translate(75,75);
  
      // Drawing a 100px line actually draws a 40px line
      ctx.scale(0.4,0.4);
  
      // Start the cursor rotated at 12:00
      ctx.rotate(-Math.PI/2);
  
      // Initalize the drawing properties
      ctx.strokeStyle = "black";
      ctx.fillStyle = "black";
      ctx.lineWidth = 8;
      ctx.lineCap = "round";
    
      // Hour marks
      ctx.save();
        ctx.beginPath();
          // For each hour
          for ( var i = 0; i < 12; i++ ) {
            // Rotate the canvas 1/12th of the way
            // (remember: A circle = 2 * PI)
            ctx.rotate(Math.PI/6);
  
            // Move the cursor to near the outside of the canvas
            ctx.moveTo(100,0);
  
            // and draw a short (20px) tick
            ctx.lineTo(120,0);
          }
        ctx.stroke();
      ctx.restore();
  
      // Minute marks
      ctx.save();
        // These ticks will be lighter than the hours
        ctx.lineWidth = 5;
  
        ctx.beginPath();
          // For each minute
          for ( var i = 0; i < 60; i++ ) {
            // except for the minutes that are 'on the hour'
            if ( i % 5 != 0 ) {
              // Move the cursor farther out
              ctx.moveTo(117,0);
  
              // And draw a short (3px) line
              ctx.lineTo(120,0);
            }
  
            // Rotate the canvas 1/60th of the way around
            ctx.rotate(Math.PI/30);
          }
        ctx.stroke();
      ctx.restore();
    
      // Draw Hour Hand
      ctx.save();
        // Rotate the canvas to the correct position
        ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )
  
        // This line is going to be wide
        ctx.lineWidth = 14;
  
        ctx.beginPath();
          // Start drawing from just off-center (making it look like a clock hand)
          ctx.moveTo(-20,0);
  
          // And draw to near the hour ticks
          ctx.lineTo(80,0);
        ctx.stroke();
      ctx.restore();
  
      // Draw Minute Hand
      ctx.save();
        // Rotate the canvas to the current minute position
        ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )
  
        // This line will be thinner than the hour hand
        ctx.lineWidth = 10;
  
        ctx.beginPath();
          // But it's also longer, so set it farther back
          ctx.moveTo(-28,0);
  
          // And draw it farther out
          ctx.lineTo(112,0);
        ctx.stroke();
      ctx.restore();
    
      // Draw Second Hand
      ctx.save();
        // Rotate the canvas to the current second position
        ctx.rotate(sec * Math.PI/30);
  
        // This line will be redish
        ctx.strokeStyle = "#D40000";
        ctx.fillStyle = "#D40000";
  
        // and thinner than the other hands
        ctx.lineWidth = 6;
  
        ctx.beginPath();
          // But also set farther back
          ctx.moveTo(-30,0);
  
          // But stubbier
          ctx.lineTo(83,0);
        ctx.stroke();
      ctx.restore();
  
      // Outside Blue Circle
      ctx.save();
        // The border will be wide
        ctx.lineWidth = 14;
  
        // and blue-ish
        ctx.strokeStyle = '#325FA2';
  
        ctx.beginPath();
          // Draw a complete circle, 142px out
          ctx.arc(0,0,142,0,Math.PI*2,true);
        ctx.stroke();
      ctx.restore();
  
    ctx.restore();
  }
  </script>
  </head>
  <body>
    <canvas id="canvas" height="150" width="150"></canvas>
  </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.