2014年4月18日更新本节。

演示中修改代码，使画布时刻保持页面允许的最大正方形，并能同步调整画布中各元素的大小（包括字体）。

最近想法比较多，大多是对以前写的一些半死不活的 demo 的一些改进，其中大部分都是 HTML5 的，再其中大部分又是 canvas 的。canvas 这个东西有时候让人迷惑有时候又非常吸引人，因为比较接近底层的缘故吧，但又是在可视化的同时接近底层。

昨天晚上开始动手到现在，做好了这个彩色时钟。去年我就写过一个类似的、也许代码优化得更好的例子，作为一个 Chrome 插件的一部分存在，本来是要发布到应用市场的，因为一些原因（Chrome 应用市场收取开发者注册费必须使用国外信用卡； Chrome 扩展的新版 manifest 规范严格限制了 inline-script 的运行，而我当时非常喜欢用 inline-script ）未能如愿。几经辗转，很多代码都丢失了。所以这次是重新写的。基本延续了我一年前那种配色白痴的配色风格。（==。）

代码都是加过注释的，况且是很简单的功能，就不贴在这了。

这里面最主要的一点就是，使用 context.beginPath() 开始路径之后用 context.arc() 画弧，画玩之后不要闭合路径，而是直接用 context.stroke() 描边，才能达到需要的效果。当然如果有兴趣的话你也可以试试闭合路径再描边。

最后，演示效果：