In this project a clock has been designed by using javascript in conjunction with the WHATWG <canvas> element.
More Examples |
If you want to use the clock for your own web site download the javascript file canvasclock.js and browse through the source code of the examples above which should give you some insight into the usage.
The main reason for this project was to have fun in using <canvas> to generate dynamic images. What could be more dynamic than a clock? This clock because of it texture may also serve as an example where vector graphics such as SVG may not be the most appropriate technology. Please also note that the patterns and colours are all truely deterministic. There is no randomness involved. However clocks may look differently depending on the computer's performance.
Please note that the <canvas> element is not supported by all browsers, in particular it is currently not supported by the Internet Explorer. The clocks have been tested with Firefox 2.0.
Related Links:
© Marc Conrad, 2007. The material on this page is presented "as is". There is no warranty implied by presenting this stuff. Feel free to use the canvasclock for your own projects. When doing so please give a reference to this web site (http://perisic.com/canvasclock) The webspace for this project is kindly provided by the Perisic Guesthouse (www.perisic.com). |