html语言中钟表怎么做,html5制作一个时钟(示例代码)

试着用html5写一个时钟

记得开始这个随笔是几天前，一直保存在草稿里面，一直感觉有个东西搁在在那里，所以今天熬夜也要写完这篇博客！！！哈哈...不多说来上代码和思路。

---------------------------------------------------------------------------------------------

其实并不难，主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveTo(),lineTo();beginPath();requestAnimationFrame()；在开始看下面的代码的时候最好先弄清楚这些方法的原理和作用，另外canvas有个重要特性:canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法.

好了，开始代码，先开始画12个小时和60分钟的线条(一些需要步骤在代码有注释):

1 functionrotateFun(){2 var now= new Date();//获取当前时间对象，对以后指针旋转很重要

3

4 var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境

5

6 ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示

7

8 ctx.save();//第一个保存状态

9 ctx.fillStyle=‘rgba(20,20,20,0.2)‘;10 ctx.fillRect(0,0,800,600);11 ctx.translate(400,300);//平移画布中心到中心

12

13 //画12个小时

14 ctx.save();15 for (var i = 0; i < 12; i++) {16 ctx.strokeStyle=‘black‘;17 ctx.rotate(2*Math.PI/12);

18 ctx.moveTo(120,0);19 ctx.lineTo(100,0);20 ctx.lineWidth=8;21 ctx.stroke();22 }23 ctx.restore();24

25 //画60个分钟

26 ctx.save();27 for (var i = 0; i <60 ;i++) {28 ctx.strokeStyle=‘black‘;29 ctx.rotate(2*Math.PI/60);

30 ctx.moveTo(115,0);31 ctx.lineTo(105,0);32 ctx.lineWidth=2;33 ctx.stroke();34 }35 ctx.restore();36

37 ctx.restore()38

39 }

-----------------------------------------------------------------------

静态完了就是动态的，指针随着时间而走动.这里指针走的原理是：每一帧调用后都是重新画的一个画布，里面的指针，12个小时和60分钟的线条都是新的，只是下一秒后就物是人非，整个画布就转了某个角度，但是指针相对画布还是静止没有变过的，所以我们的眼睛就会产生了指针随着时间走的效果，另外就是指针指在当前时间都是参数控制的，代买如下:

var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();//画秒针

ctx.save();

ctx.beginPath();

ctx.rotate(sec*Math.PI/30);

ctx.strokeStyle=‘black‘;

ctx.lineWidth=4;

ctx.moveTo(0,30);

ctx.lineTo(0,-112);

ctx.stroke();

ctx.closePath();

ctx.restore();//画分钟

ctx.save();

ctx.beginPath();

ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);

ctx.strokeStyle=‘black‘;

ctx.lineWidth=6;

ctx.moveTo(0,28);

ctx.lineTo(0,-83);

ctx.stroke();

ctx.closePath();

ctx.restore();//画时钟

ctx.save();

ctx.beginPath();

ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);

ctx.strokeStyle=‘black‘;

ctx.lineWidth=8;

ctx.moveTo(0,26);

ctx.lineTo(0,-63);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle=‘blue‘;

ctx.arc(0,0,126,0,2*Math.PI);

ctx.stroke();

ctx.closePath();

ctx.restore();

ctx.restore();

------------------------------------------------------------

好了，知道了这些原理：给出完整的代码,这些代码还有优化改进的地方：

1

2

3

4

5

rotate

6

7

8

9

10 functionrotateFun(){11 var now= new Date();//获取当前时间对象，对以后指针旋转很重要

12

13 var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境

14

15 ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示

16

17 ctx.save();//第一个保存状态

18 ctx.fillStyle=‘rgba(20,20,20,0.2)‘;19 ctx.fillRect(0,0,800,600);20 ctx.translate(400,300);//平移画布中心到中心

21

22 //画12个小时

23 ctx.save();24 for (var i = 0; i < 12; i++) {25 ctx.strokeStyle=‘black‘;26 ctx.rotate(2*Math.PI/12);

27 ctx.moveTo(120,0);28 ctx.lineTo(100,0);29 ctx.lineWidth=8;30 ctx.stroke();31 }32 ctx.restore();33

34 //画60个分钟

35 ctx.save();36 for (var i = 0; i <60 ;i++) {37 ctx.strokeStyle=‘black‘;38 ctx.rotate(2*Math.PI/60);

39 ctx.moveTo(115,0);40 ctx.lineTo(105,0);41 ctx.lineWidth=2;42 ctx.stroke();43 }44 ctx.restore();45

46 var hour=now.getHours();47 var min=now.getMinutes();48 var sec=now.getSeconds();49

50 //画秒针

51 ctx.save();52 ctx.beginPath();53 ctx.rotate(sec*Math.PI/30);

54 ctx.strokeStyle=‘black‘;55 ctx.lineWidth=4;56 ctx.moveTo(0,30);57 ctx.lineTo(0,-112);58 ctx.stroke();59 ctx.closePath();60 ctx.restore();61

62 //画分钟

63 ctx.save();64 ctx.beginPath();65 ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);66 ctx.strokeStyle=‘black‘;67 ctx.lineWidth=6;68 ctx.moveTo(0,28);69 ctx.lineTo(0,-83);70 ctx.stroke();71 ctx.closePath();72 ctx.restore();73

74 //画时钟

75 ctx.save();76 ctx.beginPath();77 ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);

78 ctx.strokeStyle=‘black‘;79 ctx.lineWidth=8;80 ctx.moveTo(0,26);81 ctx.lineTo(0,-63);82 ctx.stroke();83 ctx.closePath();84 ctx.beginPath();85 ctx.strokeStyle=‘blue‘;86 ctx.arc(0,0,126,0,2*Math.PI);87 ctx.stroke();88 ctx.closePath();89 ctx.restore();90 ctx.restore();91

92 window.requestAnimationFrame(rotateFun);93 }94

95 rotateFun();96

97

98

00:45:50