[Javascript]基于ExplorerCanvas绘制表盘时钟
这是一个Javascrip写的时钟，没有任何图片。
由于ff等dom2浏览器使用svg绘图，而ie使用vml，两者差距非常大，所以xml绘图一直无法统一起来。
最近想要尝试一下，想要实现svg和vml的封装和统一调用，但是搜索到Google的才子们发布的这个在IE下实现canvas绘图的框架。虽然并不是所有的svg的功能都实现了，但是绝对，聊胜于无。
这个时钟，即是基于该框架。由于该框架采用的函数名称与svg绘图的方法都是一致的，所以在ff等dom2浏览器中均可以运行，而且貌似效率要高一点。
这个时钟还不是最终的版本，所以有些参数请到函数内部修改。
Clock.js的几点说明
function Clock(id, size) ：
id是一个html容器的id，请在里面放四个canvas标签。实在没办法，ie不识别这个标签，无法动态创建。
size是表盘的直径。
void __drawBack__()：
绘制表盘的刻度和背景。直接找个图片作容器背景来做表盘更简单。
Array __getSecondAngel__()：
获取当前时间，将秒、分、时转换为角度，并返回一个数组。
void __handTool__()：
在制定的canvas中绘制表针。可以通过修改这个函数，来改变指针的类型。
int secondStep：
每秒的分步。如果为1，则一秒跳一针，如果到30上下，则会很平滑地转动。数值越大运算频率越高。预置为6，模拟机械手表的转动感觉。
以下是所需的资源
本演示的代码。请注意，excanvas.compiled.js代码通过css方式调用，在IE下必须放在canvas标签之前。
<style>
#info{ border:1px solid #555; background-color:#f1f1f1; font-size:14px; width:800px; padding:1em; line-height:1.4em; text-indent:2em; }
#container{ position:absolute; top:320px; left:600px; }
</style>
<!--[if IE]><script type="text/javascript" src="https://files.cnblogs.com/muse/excanvas.compiled.js"></script><![endif]-->
<script type="text/javascript" src="https://files.cnblogs.com/muse/mk.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/muse/Clock.js"></script>
<script type="text/javascript">
mk.addEvent(window, "load", function(){ new Clock("container", 200).init(); });
</script>
<div id="container">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
#info{ border:1px solid #555; background-color:#f1f1f1; font-size:14px; width:800px; padding:1em; line-height:1.4em; text-indent:2em; }
#container{ position:absolute; top:320px; left:600px; }
</style>
<!--[if IE]><script type="text/javascript" src="https://files.cnblogs.com/muse/excanvas.compiled.js"></script><![endif]-->
<script type="text/javascript" src="https://files.cnblogs.com/muse/mk.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/muse/Clock.js"></script>
<script type="text/javascript">
mk.addEvent(window, "load", function(){ new Clock("container", 200).init(); });
</script>
<div id="container">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
