当前位置:Gxlcms > html代码 > HTML5应用之时钟_html/css_WEB-ITnose

HTML5应用之时钟_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中。而HTML5的到来,我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。





今天,我们一起来使用HTML5制作一个指针会走动的时钟。

HTML

我们只需要在html中放置一个canvas标签:#clock,宽度和高度都是400px。

[html] view plaincopy

  1. HTML5应用之时钟


Javascript

我们先来获取当前时间:包括时分秒,确保在打开页面时能定位指针位置,并且定义好圆点坐标和秒钟角度变量。

[js] view plaincopy

  1. var time = new Date();
  2. var h = time.getHours(); //时
  3. var m = time.getMinutes(); //分
  4. var s = time.getSeconds(); //秒
  5. h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
  6. var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量


接下来,我们利用canvas来绘制时钟,我们写一个函数draw(),绘制刻度,执行该函数一次,则秒针顺时针走动1/60个圆弧度。

首先,获取canvas绘图对象,绘制时钟刻度。我们将时钟(圆)划分为12个刻度,即每个刻度代表一个钟头,当然,你也可以划分为60个刻度,这样每个刻度就代表1分钟。

[js] view plaincopy

  1. function draw(){
  2. var c=document.getElementById("clock");
  3. var ctx=c.getContext("2d"); //获取绘图对象
  4. ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
  5. s++;//秒针
  6. ctx.fillStyle = '#fff' //填充白色背景色
  7. ctx.fillRect(0,0,c.width,c.height); //设置画布区域
  8. ctx.save(); //保存当前绘图状态
  9. // 时间刻度
  10. for(var i=0;i<12;i++){ //划分12刻度
  11. var angle=(Math.PI*2)/12; //获得每个刻度对应的弧度
  12. ctx.beginPath();//开始绘制
  13. ctx.font="12px Arial"; //设置字体
  14. if(i==0||i==3||i==6||i==9){ //当指向0(12点)、3点、6点、9点时
  15. ctx.fillStyle="red"; //刻度为红色
  16. radius=4; //刻度半径长4px
  17. }else{
  18. ctx.fillStyle="blue"; //刻度为蓝色
  19. radius=3; //刻度半径长为3px
  20. }
  21. ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆作为刻度
  22. ctx.fill(); //填充路径
  23. transform(ctx,x,y,angle,true); //刻度分布
  24. }
  25. ctx.restore(); //恢复上次保存的绘图状态
  26. ...
  27. }


按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。

[js] view plaincopy

  1. function draw(){
  2. ...
  3. sAngle=(Math.PI*2)/60*s; //秒度
  4. //时针转动
  5. ctx.save();
  6. ctx.strokeStyle="red";
  7. ctx.lineWidth=3;
  8. transform(ctx,x,y,(Math.PI*2)/60*h);
  9. sj(ctx,x,y,y-40);
  10. ctx.restore();
  11. //分针转动
  12. ctx.save();
  13. ctx.strokeStyle="blue";
  14. ctx.lineWidth=2;
  15. transform(ctx,x,y,(Math.PI*2)/60*m);
  16. sj(ctx,x,y,y-68);
  17. ctx.restore();
  18. //秒针转动
  19. ctx.save();
  20. ctx.strokeStyle="#000";
  21. transform(ctx,x,y,sAngle);
  22. sj(ctx,x,y,y-80);
  23. ctx.restore();
  24. //数据整理
  25. if(s%60==0){
  26. sAngle=0,s=0,m++;
  27. if(m%12==0){ //每十二分 时针旋转一次
  28. if(m!=0)h++;
  29. if(m%60==0)m=0;
  30. }
  31. if(h%60==0)h=0;
  32. }
  33. }


每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细,绘制指针,根据弧度转动指针位置,其中我们调用了自定义函数trans()和pointer()。

函数pointer()用来绘制指针。其中ctx表示canvas对象,x,y是圆点坐标,z是指针头的位置。

[js] view plaincopy

  1. function pointer(ctx,x,y,z){
  2. ctx.beginPath();
  3. ctx.moveTo(x,y);
  4. ctx.lineTo(x,z);
  5. ctx.stroke();
  6. ctx.fill();
  7. }


函数transform()用来旋转指针。其中ctx表示canvas对象,x,y是圆点坐标,angle是转动角度。

[js] view plaincopy

  1. function trans(ctx,x,y,angle){
  2. ctx.transform(Math.cos(angle), Math.sin(angle),
  3. -Math.sin(angle), Math.cos(angle),
  4. x*(1-Math.cos(angle)) + x*Math.sin(angle),
  5. y*(1-Math.cos(angle)) - y*Math.sin(angle))
  6. }


最后,我们设置每隔1秒钟(即1000毫秒)执行一次draw()。

[js] view plaincopy

    1. setInterval("draw()",1000);

人气教程排行