1995eaton · July 28, 2014 04:12
diff --git a/clock.html b/clock.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Canvas Clock</title>
  <style>
    body, html {
      background-color: #1b1d1e;
    }
    #clock {
      position: absolute;
      left: 0; right: 0;
      margin: 0 auto;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      top: 50%;
    }
  </style>
 </head>
 <body>
  <div id="clock"></div>
 </body>
 <script>
  var Clock = (function(W, H) {

    var root = document.getElementById('clock');
    root.style.position = 'absolute';
    root.style.width = W + 'px';
    root.style.height = H + 'px';

    var drawArm = function(context, length, rotation) {
      context.moveTo(W / 2, H / 2);
      rotation -= 90;
      context.lineTo(W / 2 + Math.cos(rotation / 180 * Math.PI) * length, H / 2 + Math.sin(rotation / 180 * Math.PI) * length);
    };

    // Draw clock base
    (function() {
      var i,
          base = document.createElement('canvas');
      base.style.position = 'absolute';
      base.width = W;
      base.height = H;
      root.appendChild(base);
      var context = base.getContext('2d'),
          dashOffset = W / 2 - 20;
      context.beginPath();
      context.lineWidth = 2;
      context.strokeStyle = '#c1c1c1';
      context.arc(W / 2, H / 2, W / 2 - 6, 0, 2 * Math.PI, false);
      for (i = 0; i < 60; i++) {
        drawArm(context, dashOffset, i * 6);
      }
      context.stroke();
      context.closePath();
      context.beginPath();
      context.arc(W / 2, H / 2, W / 2 - 30, 0, 2 * Math.PI, false);
      context.fillStyle = '#1b1d1e';
      context.fill();
      context.closePath();
      context.beginPath();
      context.lineWidth = 3;
      context.strokeStyle = '#c1c1c1';
      context.arc(W / 2, H / 2, W / 2 - 6, 0, 2 * Math.PI, false);
      for (i = 0; i < 12; i++) {
        drawArm(context, dashOffset, 30 * i);
      }
      context.stroke();
      context.closePath();
      context.beginPath();
      context.arc(W / 2, H / 2, W / 2 - 50, 0, 2 * Math.PI, false);
      context.fillStyle = '#1b1d1e';
      context.fill();
      context.closePath();
    })();

    // Hour/minute/second hand loop
    (function() {

      var canvas = document.createElement('canvas'),
          context = canvas.getContext('2d');

      canvas.style.position = 'absolute';
      canvas.style.zIndex = '1';
      canvas.width = W;
      canvas.height = H;
      root.appendChild(canvas);
      context.strokeStyle = '#c1c1c1';
      context.fillStyle = '#c1c1c1';

      var secondLength = W / 2 - 50,
          minuteLength = W / 2 - 100,
          hourLength = W / 2 - 200;

      var setTime = function(h, m, s) {
        context.clearRect(0, 0, W, H);
        context.beginPath();
        context.moveTo(W / 2, H / 2);
        drawArm(context, secondLength, (360 / 60) * s);
        drawArm(context, minuteLength, (360 / 60) * m);
        drawArm(context, hourLength, (360 / 12) * h);
        context.stroke();
        context.closePath();
        context.beginPath();
        context.arc(W / 2, H / 2, 3, 0, 2 * Math.PI, false);
        context.fill();
        context.closePath();
      };

      var animLoop = function() {
        var time = new Date().getTime() / 1000;
        var seconds = time % 60;
        var minutes = (time / 60) % 60;
        var hours = (time / 3600) % 24 + 20;
        setTime(hours % 12, minutes, seconds);
        window.requestAnimationFrame(animLoop);
      };
      animLoop();

    })();

  })(600, 600);
 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Canvas Clock</title>
	<style>
	body, html {
	background-color: #1b1d1e;
	}
	#clock {
	position: absolute;
	left: 0; right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	top: 50%;
	}
	</style>
	</head>
	<body>
	<div id="clock"></div>
	</body>
	<script>
	var Clock = (function(W, H) {

	var root = document.getElementById('clock');
	root.style.position = 'absolute';
	root.style.width = W + 'px';
	root.style.height = H + 'px';

	var drawArm = function(context, length, rotation) {
	context.moveTo(W / 2, H / 2);
	rotation -= 90;
	context.lineTo(W / 2 + Math.cos(rotation / 180 * Math.PI) * length, H / 2 + Math.sin(rotation / 180 * Math.PI) * length);
	};

	// Draw clock base
	(function() {
	var i,
	base = document.createElement('canvas');
	base.style.position = 'absolute';
	base.width = W;
	base.height = H;
	root.appendChild(base);
	var context = base.getContext('2d'),
	dashOffset = W / 2 - 20;
	context.beginPath();
	context.lineWidth = 2;
	context.strokeStyle = '#c1c1c1';
	context.arc(W / 2, H / 2, W / 2 - 6, 0, 2 * Math.PI, false);
	for (i = 0; i < 60; i++) {
	drawArm(context, dashOffset, i * 6);
	}
	context.stroke();
	context.closePath();
	context.beginPath();
	context.arc(W / 2, H / 2, W / 2 - 30, 0, 2 * Math.PI, false);
	context.fillStyle = '#1b1d1e';
	context.fill();
	context.closePath();
	context.beginPath();
	context.lineWidth = 3;
	context.strokeStyle = '#c1c1c1';
	context.arc(W / 2, H / 2, W / 2 - 6, 0, 2 * Math.PI, false);
	for (i = 0; i < 12; i++) {
	drawArm(context, dashOffset, 30 * i);
	}
	context.stroke();
	context.closePath();
	context.beginPath();
	context.arc(W / 2, H / 2, W / 2 - 50, 0, 2 * Math.PI, false);
	context.fillStyle = '#1b1d1e';
	context.fill();
	context.closePath();
	})();

	// Hour/minute/second hand loop
	(function() {

	var canvas = document.createElement('canvas'),
	context = canvas.getContext('2d');

	canvas.style.position = 'absolute';
	canvas.style.zIndex = '1';
	canvas.width = W;
	canvas.height = H;
	root.appendChild(canvas);
	context.strokeStyle = '#c1c1c1';
	context.fillStyle = '#c1c1c1';

	var secondLength = W / 2 - 50,
	minuteLength = W / 2 - 100,
	hourLength = W / 2 - 200;

	var setTime = function(h, m, s) {
	context.clearRect(0, 0, W, H);
	context.beginPath();
	context.moveTo(W / 2, H / 2);
	drawArm(context, secondLength, (360 / 60) * s);
	drawArm(context, minuteLength, (360 / 60) * m);
	drawArm(context, hourLength, (360 / 12) * h);
	context.stroke();
	context.closePath();
	context.beginPath();
	context.arc(W / 2, H / 2, 3, 0, 2 * Math.PI, false);
	context.fill();
	context.closePath();
	};

	var animLoop = function() {
	var time = new Date().getTime() / 1000;
	var seconds = time % 60;
	var minutes = (time / 60) % 60;
	var hours = (time / 3600) % 24 + 20;
	setTime(hours % 12, minutes, seconds);
	window.requestAnimationFrame(animLoop);
	};
	animLoop();

	})();

	})(600, 600);
	</script>
	</html>