Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (121 sloc) 3.96 KB
<html>
<head>
<title>Canvas clock</title>
<link rel="stylesheet" href="canvas.css" />
<!--[if IE]><script src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4610411-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var getTime = function() {
var context = $("canvas")[0].getContext("2d");
context.save();
context.fillStyle = "#bdc2d9";
context.lineWidth = 3;
context.strokeStyle = "Black";
context.beginPath();
context.arc(150,150,120,0,Math.PI*2,false);
context.closePath();
context.fill();
context.stroke();
context.fillStyle = "Black";
context.beginPath();
context.arc(150,150,5,0,Math.PI*2,false);
context.closePath();
context.fill();
context.fillStyle = "Black";
context.translate(150,150);
context.font = "bold 16px Serif";
context.textAlign = "center";
context.textBaseline = "middle";
//Build the clock face
var theAngle = 30;
var numerals = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"]
for(i=0;i<12;i++) {
context.save();
context.rotate(theAngle*(Math.PI/180));
context.translate(0,-100);
context.rotate(-theAngle*(Math.PI/180));
context.fillText(numerals[i],0,0);
context.restore();
theAngle = theAngle + 30;
}
context.translate(0,0);
context.save();
//Draw minute hand
context.lineWidth = 4;
var minuteValue = 6;
var d = new Date();
var minutes = d.getMinutes();
context.rotate(minutes*minuteValue*(Math.PI/180));
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,-110);
context.closePath();
context.shadowColor = "Black";
context.shadowBlur = 5;
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.stroke();
context.restore();
context.restore();
context.save();
//Draw hour hand
context.translate(150,150);
context.lineWidth = 4;
var hourValue = 30;
var hours = d.getHours();
if(hours>12) {
hours = hours-12;
}
context.rotate(hours*hourValue*(Math.PI/180));
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,-80);
context.closePath();
context.shadowColor = "Black";
context.shadowBlur = 5;
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.stroke();
context.restore();
context.save();
//Draw second hand
context.translate(150,150);
context.lineWidth = 2;
var secValue = 6;
var seconds = d.getSeconds();
context.rotate(seconds*secValue*(Math.PI/180));
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,-100);
context.closePath();
context.shadowColor = "Black";
context.shadowBlur = 5;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.stroke();
context.restore();
setTimeout(getTime,33);
}
getTime();
});
</script>
</head>
<body>
<h1>HTML Canvas - Clock</h1>
<canvas width="500px" height="300px"></canvas>
<div>
<p>A simple clock built using jQuery and the canvas element.</p>
</div>
</body>
</html>