[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，模拟机械手表的转动感觉。

以下是所需的资源

ExplorerCanvas站点

mk.js v 2.9

Clock.js

本演示的代码。请注意，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="http://files.cnblogs.com/muse/excanvas.compiled.js"></script><![endif] -->
< script  type ="text/javascript"  src ="http://files.cnblogs.com/muse/mk.js" ></ script >
< script  type ="text/javascript"  src ="http://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 >

 

 

转载于:https://www.cnblogs.com/muse/articles/1446121.html