#javascript-code-07-clock.htm / htm
<html>
<head>
<title>Canvas Clock Demo</title>
<script>
// Wait for the browser to load
window.onload = function() {
// Draw the clock
clock();
// and re-draw the clock every second thereafter
setInterval(clock, 1000);
};
function clock() {
// Get the current date and time
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr >= 12 ? hr - 12 : hr;
// Get the drawing context of the canvas element
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
// Initalize the drawing canvas
ctx.clearRect(0,0,150,150);
// When we draw at 0,0 we're actually drawing at 75,75
ctx.translate(75,75);
// Drawing a 100px line actually draws a 40px line
ctx.scale(0.4,0.4);
// Start the cursor rotated at 12:00
ctx.rotate(-Math.PI/2);
// Initalize the drawing properties
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// Hour marks
ctx.save();
ctx.beginPath();
// For each hour
for ( var i = 0; i < 12; i++ ) {
// Rotate the canvas 1/12th of the way
// (remember: A circle = 2 * PI)
ctx.rotate(Math.PI/6);
// Move the cursor to near the outside of the canvas
ctx.moveTo(100,0);
// and draw a short (20px) tick
ctx.lineTo(120,0);
}
ctx.stroke();
ctx.restore();
// Minute marks
ctx.save();
// These ticks will be lighter than the hours
ctx.lineWidth = 5;
ctx.beginPath();
// For each minute
for ( var i = 0; i < 60; i++ ) {
// except for the minutes that are 'on the hour'
if ( i % 5 != 0 ) {
// Move the cursor farther out
ctx.moveTo(117,0);
// And draw a short (3px) line
ctx.lineTo(120,0);
}
// Rotate the canvas 1/60th of the way around
ctx.rotate(Math.PI/30);
}
ctx.stroke();
ctx.restore();
// Draw Hour Hand
ctx.save();
// Rotate the canvas to the correct position
ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )
// This line is going to be wide
ctx.lineWidth = 14;
ctx.beginPath();
// Start drawing from just off-center (making it look like a clock hand)
ctx.moveTo(-20,0);
// And draw to near the hour ticks
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// Draw Minute Hand
ctx.save();
// Rotate the canvas to the current minute position
ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )
// This line will be thinner than the hour hand
ctx.lineWidth = 10;
ctx.beginPath();
// But it's also longer, so set it farther back
ctx.moveTo(-28,0);
// And draw it farther out
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
// Draw Second Hand
ctx.save();
// Rotate the canvas to the current second position
ctx.rotate(sec * Math.PI/30);
// This line will be redish
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
// and thinner than the other hands
ctx.lineWidth = 6;
ctx.beginPath();
// But also set farther back
ctx.moveTo(-30,0);
// But stubbier
ctx.lineTo(83,0);
ctx.stroke();
ctx.restore();
// Outside Blue Circle
ctx.save();
// The border will be wide
ctx.lineWidth = 14;
// and blue-ish
ctx.strokeStyle = '#325FA2';
ctx.beginPath();
// Draw a complete circle, 142px out
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
ctx.restore();
}
</script>
</head>
<body>
<canvas id="canvas" height="150" width="150"></canvas>
</body>
</html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
