在表盘之上，建有一个 canvas( 画布 )，如清单15所示。
清单 15.画布

1. <canvas id="canvas" width="128px" height="128px" class="canvas"></canvas>  

接下来，清单17将在画布上模拟出时钟以及分针，在这之前，额外需要一个后台线程用以计算时间，它被定义在名为time.js的独立脚本文件中，如清单16所示。
清单 16.后台线程

1. onmessage = function(event)   
2. {   
3. //var i = 1;   
4.    setInterval(function() {   
5.    //i++;   
6.    postMessage("");   
7.    }, 60000);   
8. };  

每过60秒钟，后台线程将会向前台线程发送一个空消息，以告诉前台线程有60秒钟已经过去了。
清单 17.前台线程的初始化

1. var canvas = document.getElementById("canvas");   
2.  if (canvas == null)    
3.  return false;    
4.  var context = canvas.getContext('2d');// 这是一个二维的图像  
5.  context.lineWidth = 2;   
6.  context.translate(64, 64);// 定义原点  
7.  
8.  // 初始化分针  
9.  context.beginPath();   
10.  context.moveTo(0,0);// 从原点开始   
11.  var date = new Date();   
12.  var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);   
13.  var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);   
14.  context.lineTo(mhx, mhy);// 至分针末端所在位置  
15.  context.closePath();   
16.  context.stroke();   
17.       
18.  // 初始化时针  
19.  context.beginPath();   
20.  context.moveTo(0,0);// 从原点开始  
21.  var date = new Date();   
22.  var hour = date.getHours();   
23.  if(hour>=12)   
24.  hourhour = hour - 12;   
25.  var minute = date.getMinutes();   
26.  var hhx = 27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360);   
27.  var hhy = 27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);   
28.  context.lineTo(hhx, hhy);// 至时针末端所在位置  
29.  context.closePath();   
30.  context.stroke();  

前台线程首先会获取canvas，并设置表盘中心为坐标原点。然后，获取当前时间，计算分针当前所应指向的坐标，然后从原点出发，画出分针。对于时针，若系统为24小时制，需要首先转化为12小时制，此后的处理类似于分针。
接下来，需要将前台与后台线程联系起来，利用HTML5提供的多线程编程方法，声明Worker对象作为后台线程的代理，并利用onmessage事件，对后台线程发出的消息进行处理。
清单 18.前台线程的onmessage事件

1. var worker = new Worker("js/timer.js");   
2.  
3.  worker.onmessage = function(event){   
4.       
5.     context.clearRect(-64, -64, 128, 128);// 清空分针和时针  
6.       
7.     // 重画分针  
8.     context.beginPath();   
9.     context.moveTo(0,0);// 从原点开始    
10.     var date = new Date();   
11.     var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);   
12.     var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);   
13.     context.lineTo(mhx, mhy);// 至分针末端所在位置  
14.     context.closePath();   
15.     context.stroke();   
16.       
    (责任编辑：12图资源库)
    • 共11页:
    • 上一页
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 下一页