[在线演示]HTML5 Canvas clock 示例（三种效果）

html5

[在线演示]HTML5 Canvas clock 示例（三种效果）
演示地址：http://www.html51.com/topic-demo-html5-clock.html


主要代码：

1. function Clock (id)
   
2. {
   
3.     this.id      = id;
   
4.     this.canvas  = document.getElementById(id);
   
5.     this.context = this.canvas.getContext('2d');
   
6.     this.canvas.__object__ = this;
   
7.    
   
8.     this.centerx = this.canvas.width / 2;
   
9.     this.centery = this.canvas.height / 2;
   
10.    
    
11.     this.properties = [];
    
12.     this.properties['clock.strokestyle']   = 'black';
    
13.     this.properties['clock.gutter']        = 25;
    
14.     this.properties['clock.shadow']        = true;
    
15.     this.properties['clock.numbers']       = true;
    
16.     this.properties['clock.background']    = true;
    
17.     this.properties['clock.digital']       = true;
    
18.     this.properties['clock.text.size']     = 12;
    
19.     this.properties['clock.numbers.style'] = 'numbers';
    
20.     this.properties['clock.centerpin']     = true;
    
21.     this.properties['clock.hands.tails']   = true;
    
22.     this.properties['clock.numbers.style.lines.linewidth'] = 13;
    
23. 
    
24.     this.radius  = Math.min(this.canvas.width / 2, this.canvas.height / 2) - this.Get('clock.gutter');
    
25. }

复制代码

可惜的是Chrome6不支持，html5还要再进化。

css3lover

Firefox下效果不错！