A Clock in Canvas

由 joelhy 于 周一, 07/09/2007 - 21:35 提交。
  1. // Wait for the browser to load
  2. window.onload = function() {
  3.    // Draw the clock
  4.    clock();
  5.    // and re-draw the clock every second thereafter
  6.    setInterval(clock, 1000);
  7. };
  8. function clock() {
  9.    // Get the current date and time
  10.    var now = new Date();
  11.    var sec = now.getSeconds();
  12.    var min = now.getMinutes();
  13.    var hr = now.getHours();
  14.    hr = hr >= 12 ? hr - 12 : hr;
  15.    // Get the drawing context of the  element
  16.    var ctx = document.getElementById('canvas').getContext('2d');
  17.    ctx.save();
  18.      // Initalize the drawing Canvas
  19.      ctx.clearRect(0,0,150,150);
  20.      // When we draw at 0,0 we're actually drawing at 75,75
  21.      ctx.translate(75,75);
  22.      // Drawing a 100px line actually draws a 40px line
  23.      ctx.scale(0.4,0.4);
  24.  
  25.         // Start the cursor rotated at 12:00
  26.         ctx.rotate(-Math.PI/2);
  27.         // Initalize the drawing properties
  28.         ctx.strokeStyle = "black";
  29.         ctx.fillStyle = "black";
  30.         ctx.lineWidth = 8;
  31.         ctx.lineCap = "round";
  32.         // Hour marks
  33.         ctx.save();
  34.           ctx.beginPath();
  35.             // For each hour
  36.             for ( var i = 0; i < 12; i++ ) {
  37.               // Rotate the Canvas 1/12th of the way
  38.               // (remember: A circle = 2 * PI)
  39.               ctx.rotate(Math.PI/6);
  40.               // Move the cursor to near the outside of the Canvas
  41.               ctx.moveTo(100,0);
  42.               // and draw a short (20px) tick
  43.               ctx.lineTo(120,0);
  44.             }
  45.           ctx.stroke();
  46.         ctx.restore();
  47.         // Minute marks
  48.         ctx.save();
  49.           // These ticks will be lighter than the hours
  50.           ctx.lineWidth = 5;
  51.           ctx.beginPath();
  52.             // For each minute
  53.             for ( var i = 0; i < 60; i++ ) {
  54.               // except for the minutes that are 'on the hour'
  55.               if ( i % 5 != 0 ) {
  56.                 // Move the cursor farther out
  57.                 ctx.moveTo(117,0);
  58.                 // And draw a short (3px) line
  59.                 ctx.lineTo(120,0);
  60.               }
  61.  
  62.       // Rotate the Canvas 1/60th of the way around
  63.       ctx.rotate(Math.PI/30);
  64.     }
  65.   ctx.stroke();
  66. ctx.restore();
  67. // Draw Hour Hand
  68. ctx.save();
  69.   // Rotate the Canvas to the correct position
  70.   ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )
  71.   // This line is going to be wide
  72.   ctx.lineWidth = 14;
  73.   ctx.beginPath();
  74.     // Start drawing from just off-center (making it look like a clock hand)
  75.     ctx.moveTo(-20,0);
  76.     // And draw to near the hour ticks
  77.     ctx.lineTo(80,0);
  78.   ctx.stroke();
  79. ctx.restore();
  80. // Draw Minute Hand
  81. ctx.save();
  82.   // Rotate the Canvas to the current minute position
  83.   ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )
  84.   // This line will be thinner than the hour hand
  85.   ctx.lineWidth = 10;
  86.   ctx.beginPath();
  87.     // But it's also longer, so set it farther back
  88.     ctx.moveTo(-28,0);
  89.     // And draw it farther out
  90.     ctx.lineTo(112,0);
  91.   ctx.stroke();
  92. ctx.restore();
  93. // Draw Second Hand
  94. ctx.save();
  95.   // Rotate the Canvas to the current second position
  96.   ctx.rotate(sec * Math.PI/30);
  97.            // This line will be redish
  98.            ctx.strokeStyle = "#D40000";
  99.            ctx.fillStyle = "#D40000";
  100.            // and thinner than the other hands
  101.            ctx.lineWidth = 6;
  102.            ctx.beginPath();
  103.              // But also set farther back
  104.              ctx.moveTo(-30,0);
  105.              // But stubbier
  106.              ctx.lineTo(83,0);
  107.            ctx.stroke();
  108.         ctx.restore();
  109.         // Outside Blue Circle
  110.         ctx.save();
  111.            // The border will be wide
  112.            ctx.lineWidth = 14;
  113.            // and blue-ish
  114.            ctx.strokeStyle = '#325FA2';
  115.            ctx.beginPath();
  116.              // Draw a complete circle, 142px out
  117.              ctx.arc(0,0,142,0,Math.PI*2,true);
  118.            ctx.stroke();
  119.         ctx.restore();
  120.       ctx.restore();
  121.     }
  122.  
  123. Your browser does not support canvas.
»

回复

此内容将保密，不会被其他人看见。
  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 允许的 HTML 标签: <img> <p> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <coolcode>
  • You can use coolfilter tags in the text, to include code and media

更多格式化选项信息