Tag Archives: clock

Development Web Development

More HTML5 canvas tinkerings – an analog clock

I’ve been playing around with more HTML5 canvas stuff to try to reinforce my learning so far and, tonight, finally managed to finish a little project I’ve been messing with for the past couple of days, an analog clock!

canvasclock

It’s nothing too special, but I’m very happy with it.  The code could definitely do with some tidying up, I think, and I’ll definitely get around to it soon.  There’s so many things I’m realising are possible with this exciting technology, so look out for more posts on the subject.

In terms of the coding for the clock, one of the things I’m most happy with is the little routine I threw together to draw the numerals on 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;
}

That I even managed to suss this bit out proves to me that I’m slowly starting to get the hang of what I’m doing, not only with the limited canvas knowledge I have, but with jQuery. It’s nice to have an idea in my mind of what I want to achieve and to be able to turn my thoughts into something real on the screen.

I’ve a couple more exciting ideas that I hope to put together over the next few days, so please do keep an eye out for more. When I understand things more, I hope to pen a few canvas related tutorials to help you guys out, too!

Until next time!  The full code for the clock can be found on Github.com.  Feel free to fork, comment, etc as you please.