jacobmendoza/CanvasClockExperiment.js

## CanvasClockExperiment.js
<html>
 <head>
  <script type="application/javascript">
    var _context = null;
    var _counterIdentifier = null;
    var _counterState = 0;

    function startCounter() {
      if (canvas.getContext) {
        _context = canvas.getContext("2d");
        _counterIdentifier = setInterval(manageCounter, 1000);
      }
    }

    function manageCounter() {
      draw(_counterState);

      _counterState++;

      if (_counterState > 60)
        _counterState = 0;
    }


    function draw(selectedDot) {
      var canvas = document.getElementById('canvas');
        var middlePointX = 1024/2;
        var middlePointY = 768/2;

        var startAngle = 0;
        var endingAngle = Math.PI*2;

        _context.save();
        _context.translate(middlePointX,middlePointY);


        var numberOfElements = 60;

        _context.clearRect(0,0,1024,768);
        for (var j=0;j<numberOfElements;j++){
          var computedRotation = (Math.PI*2 / numberOfElements);

          if (selectedDot == j)
            _context.fillStyle = 'rgba(255,255,255, 1)';
          else
            _context.fillStyle = 'rgb(255,127,' + (j + 1) * 2 +')';

          _context.rotate(computedRotation);
          _context.beginPath();
          _context.arc(0, -230, 10, startAngle, endingAngle, true);
          _context.fill();

          console.log('Rotacion: ' + computedRotation);
        }


        _context.restore();

    }

    function drawCounterText() {
        _context.font = "4em Arial";
        _context.fillStyle = 'rgb(255,255,255)';
        _context.fillText("00:00:00", 390, 405)  ;
    }


  </script>
 </head>
 <body onload="startCounter();">
   <canvas id="canvas" width="1024" height="768" style="padding-left: 20px; background-color: #000000"></canvas>
 </body>
</html>
	<html>
	<head>
	<script type="application/javascript">
	var _context = null;
	var _counterIdentifier = null;
	var _counterState = 0;

	function startCounter() {
	if (canvas.getContext) {
	_context = canvas.getContext("2d");
	_counterIdentifier = setInterval(manageCounter, 1000);
	}
	}

	function manageCounter() {
	draw(_counterState);

	_counterState++;

	if (_counterState > 60)
	_counterState = 0;
	}


	function draw(selectedDot) {
	var canvas = document.getElementById('canvas');
	var middlePointX = 1024/2;
	var middlePointY = 768/2;

	var startAngle = 0;
	var endingAngle = Math.PI*2;

	_context.save();
	_context.translate(middlePointX,middlePointY);


	var numberOfElements = 60;

	_context.clearRect(0,0,1024,768);
	for (var j=0;j<numberOfElements;j++){
	var computedRotation = (Math.PI*2 / numberOfElements);

	if (selectedDot == j)
	_context.fillStyle = 'rgba(255,255,255, 1)';
	else
	_context.fillStyle = 'rgb(255,127,' + (j + 1) * 2 +')';

	_context.rotate(computedRotation);
	_context.beginPath();
	_context.arc(0, -230, 10, startAngle, endingAngle, true);
	_context.fill();

	console.log('Rotacion: ' + computedRotation);
	}



	_context.restore();

	}

	function drawCounterText() {
	_context.font = "4em Arial";
	_context.fillStyle = 'rgb(255,255,255)';
	_context.fillText("00:00:00", 390, 405) ;
	}


	</script>
	</head>
	<body onload="startCounter();">
	<canvas id="canvas" width="1024" height="768" style="padding-left: 20px; background-color: #000000"></canvas>
	</body>
	</html>