js时钟(二)

原创 2016年06月01日 15:08:47

继上篇写了js的常用数字时钟的实现后,这里总结一下模拟时钟的实现方法。注:其中时钟的背景来源于网络。

模拟时钟,主要是绘制时钟,将获取到的系统时间分别作为时针分针秒针的旋转角,每次在时钟中重绘,其主要代码如下。

 var canvas=document.getElementById('canvas').getContext('2d');
 var clockImage =new Image();
 clockImage.src="clock.png";
 //update the clock
 setInterval(function(){
     //clear the map
    canvas.clearRect(0,0,500,500);
    canvas.save();
     //draw image
    canvas.drawImage(clockImage,0,0,500,500);
    //set Text
    canvas.textAlign="center";
    canvas.textBaseline="middle";
    canvas.translate(250,250);
    canvas.font = '36px Arial';
    canvas.fillStyle = '#000';
    canvas.beginPath();
    for(var i=1;i<=12;i++){
       var degree=(i-3)*Math.PI*2/12;
       var x=250*Math.cos(degree)*0.7;
       var y=250*Math.sin(degree)*0.7;
       canvas.fillText(i,x,y);
    }

    //get current time
    var now=new Date();
    var h=now.getHours();
    var m=now.getMinutes();
    var s=now.getSeconds();
    h=h>12?h-12:h;
    var hours=h+m/60;
    var minutes=m+s/60;
    //draw hours
    canvas.save();
    var degree=(hours-3)*Math.PI*2/12;
    canvas.rotate(degree);
    canvas.beginPath();
    canvas.moveTo(-15,-5);
    canvas.lineTo(-15,5);
    canvas.lineTo(250*0.5,-1);
    canvas.lineTo(250*0.5,1);
    canvas.fill();
    canvas.restore();

    //draw minutes
    canvas.save();
    degree=(minutes-15)*Math.PI*2/60;
    canvas.rotate(degree);
    canvas.beginPath();
    canvas.moveTo(-15,-4);
    canvas.lineTo(-15,4);
    canvas.lineTo(250*0.6,-1);
    canvas.lineTo(250*0.6,1);
    canvas.fill();
    canvas.restore();

    //draw seconds
    canvas.save();
    degree=(s-15)*Math.PI*2/60;
    canvas.rotate(degree);
    canvas.beginPath();
    canvas.moveTo(-15,-3);
    canvas.lineTo(-15,3);
    canvas.lineTo(250*0.7,-1);
    canvas.lineTo(250*0.7,1);
    canvas.fill();
    canvas.restore();

    canvas.restore();
 },1000);

在这个过程中出现的问题:
* canvas不显示
解决办法:在其他均正确配置时,注意其位置,若绘制的图形不在canvas的范围内,canvas会不显示;
* canvas绘制出现不正确的部分
解决办法:注意restore和save成对出现;
* canvas中的文字出现对不齐,偏右或者偏下的问题
解决办法:设置其textAlign为center,因为其默认为start(文本在指定的位置开始),设置其textBaseline为middle,因为其默认为alphabetic(普通字母的基准线)。

至此,一个模拟时钟绘制完成,基本熟悉了canvas的绘制。具体效果如下:
实现效果

相关文章推荐

js时钟特效

  • 2015年01月18日 23:25
  • 49KB
  • 下载

js 小实例(时钟、延时提示框)

function startTime() { var today = new Date() //得到当前时间对象 var h = today.getHours() //现在的小时数 var m ...

复古翻牌时钟效果(js)

  • 2017年08月15日 13:29
  • 58KB
  • 下载

JS俄罗斯方块,显示时钟

  • 2016年02月04日 11:17
  • 46KB
  • 下载

JS特效--跟随鼠标移动的日历时钟

跟随鼠标移动的日历时钟

js学习-数码时钟

  • 2015年06月17日 15:19
  • 230KB
  • 下载

说说今天学习的用JS绘制绚丽的时钟效果

今天又是一天的html5的Canvas属性的学习,然后自己做了一个小demo,绘制了一个绚丽的带有动画效果的时钟。 废话不多说,先贴图,大家感受下: 上面分别是时分秒,时间走动,只有某个数字改变了...

js 特效 html 特效 号时钟

  • 2011年08月17日 20:57
  • 18KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js时钟(二)
举报原因:
原因补充:

(最多只允许输入30个字)