HTML5 Canvas Analog Clock

HTML5 Canvas Analog Clock

In the below sample, we have created an analog watch in HTML5

HTML 5 Canvas Analog Watch

HTML 5 Canvas Analog Watch

Analog Watch Demo

HTML5 Digital Watch

HTML5 Digital Watch

Digital Watch Demo

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function draw()
{
	varcanvas = document.getElementById("myCanvas");
	varcontext = canvas.getContext("2d");
	context.clearRect(0,0,canvas.width, canvas.height);
	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.width / 2 - 20;
	context.beginPath();
	context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
	var gradience = context.createRadialGradient(centerX, centerY, radius-30, centerX, centerY, radius-15);
	gradience.addColorStop(0, '#ffffff');
	gradience.addColorStop(1, '#000000');
	context.fillStyle = gradience;
	context.fill();
	context.lineWidth = 1;
	context.strokeStyle = '#003300';
	context.closePath();
	context.restore();
	context.beginPath();
	context.arc(centerX, centerY, 10, 0, 2 * Math.PI, false);
	context.stroke();
	context.fillStyle = "black";
	context.fill();
	context.closePath();
	context.restore();
	context.strokeStyle = '#000000';
	context.translate(centerX,centerY);
	for (var i=1; i<=60; i++) 	
         { 	
           angle = Math.PI/30*i; 	
           sineAngle = Math.sin(angle); 	
           cosAngle = -Math.cos(angle); 	
           //Hour Ticks 	
           if (i % 5 == 0)  	
           {
             context.lineWidth = 8; 	
             iPointX = sineAngle *(radius -55); 	
             iPointY = cosAngle *(radius -55); 	
             oPointX = sineAngle *(radius -40); 	
             oPointY = cosAngle *(radius -40); 	
           } 	
           else 	
             { 	
             //Minute Ticks 	context.lineWidth = 3;
             iPointX = sineAngle *(radius -50);
             iPointY = cosAngle *(radius -50); 	
             oPointX = sineAngle *(radius -40); 	
             oPointY = cosAngle *(radius -40); 	
             } 	
             context.beginPath(); 	
             context.moveTo(iPointX,iPointY); 	
             context.lineTo(oPointX,oPointY); 	
             context.stroke();   
          } 	
             var now=new Date(); 	
             var hrs=now.getHours(); 	
             var min=now.getMinutes(); 	
             var sec=now.getSeconds(); 	
             //Seconds 	
             var sangle = (Math.PI/30 * sec); 	
             var sPointX = Math.sin(sangle)*(radius - 60); 	
             var sPointY = -Math.cos(sangle)*(radius - 60); 	
             context.beginPath(); 	
             context.lineWidth = 2;  	
             context.moveTo(0,0); 	
             context.lineTo(sPointX,sPointY); 	
             context.stroke();  	
             context.closePath(); 	
             context.beginPath(); 	
             context.lineWidth = 4;  	
             sangle = (Math.PI/30*(min+(sec/60))); 	
             sPointX = Math.sin(sangle)*(radius - 80); 	
             sPointY = -Math.cos(sangle)*(radius - 80); 	
             context.moveTo(0,0); 	
             context.lineTo(sPointX,sPointY); 	
             context.stroke();  	
             context.closePath(); 	
             context.beginPath(); 	
             context.lineWidth = 6;  	
             sangle = (Math.PI/6*(hrs+(min/60)+(sec/3600))); 	
             sPointX = Math.sin(sangle)*(radius - 100); 	
             sPointY = -Math.cos(sangle)*(radius - 100); 	
             context.moveTo(0,0); 	
             context.lineTo(sPointX,sPointY); 	
             context.stroke();  	
             context.closePath(); 	
             context.beginPath(); 	
             context.font="25px Helvetica light"; 	
             if (hrs > 12)
	        {
		    context.fillText(hrs-12,-30,canvas.height/2);
	        }
	     else
	       {
		    context.fillText(hrs,-30,canvas.height/2);
	       }
	context.fillText(":",-6,canvas.height/2);
	context.fillText(min,0,canvas.height/2);
	context.fillText(":",25,canvas.height/2);
	context.fillText(sec,30,canvas.height/2);
	context.closePath();
	context.restore();
	context.translate(-centerX,-centerY);
	setTimeout(draw,1000);
}
</script>
</head>
<body onload="draw();">
<canvas class="canvas" id="myCanvas" width="600" height="600">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

HTML5 Digital Watch

<!DOCTYPE html>
<html>
<head>
<style>
.digiWatch0
{
  height: 100%;
  width:450px;
  color:orange;
  font-size: 80px;
  background-image: linear-gradient(to bottom, #000000, #999999);
  -webkit-border-radius: 14;
  -moz-border-radius: 14;
  border-radius: 14px;
  margin:10px;
  margin-right:auto;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border: solid #1f628d 4px;
  text-decoration: none;
}
</style>
<script>
function draw()
{
	 var now=new Date(); 	
	 var hrs=now.getHours(); 	
	 var min=now.getMinutes(); 	
	 var sec=now.getSeconds(); 	
	 var milliseconds = now.getMilliseconds();
	 var time =  hrs.toString() +":"+ min.toString() +":"+sec.toString() +":"+ milliseconds.toString();
	 document.getElementById("watch0").innerHTML = time;
	 setTimeout(draw,100);
}
</script>
</head>
<body onload="draw();">
<div class="digiWatch0" id="watch0">
</div>
</body>
</html>
Posted in HTML5, Web Technology Tagged with: ,
2 comments on “HTML5 Canvas Analog Clock
  1. Mathews says:

    The html5 analog clocks are small files doing the same job as a flash analog clock does. Flash is no more being supported by any smart phones and is almost dead. Html5 is the future. I maintained my website matsclock dot com distributing free flash clocks. But now I need to learn html5. This gave me a good lesson in creating a simple analog clock in html5. Either I have to do some tweaking to make these analog clock look beautiful like my flash clocks, which I will try and learn or adobe has to do something to revive flash back on phones. I wish the later was true because I have been in flash for a long time but html5 is totally new to me. I think I need to change with time and learn html5 now.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news