关闭

js时钟(二)

标签: canvasjs模拟时钟
206人阅读 评论(0) 收藏 举报
分类:

继上篇写了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的绘制。具体效果如下:
实现效果

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:59385次
    • 积分:1082
    • 等级:
    • 排名:千里之外
    • 原创:49篇
    • 转载:10篇
    • 译文:0篇
    • 评论:13条
    最新评论