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,写时钟代码

JS时钟 *{ margin: 0; padding: 0; } .box{ margin:100px auto;  width: 600px; height: 600px; b...

JS时钟实现(一)

js数字时钟实现

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

跟随鼠标移动的日历时钟

javascript学习之 小案例 (29)——js时钟

1、效果图: 项目已经放在了我的个人网站上——>点击查看效果2、实现思路 html部分使用flex布局来定位; js部分使用date对象和定时器setInterval实现,date对象相关...

js的倒计时时钟代码

之间--> function setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } set...

JS动态时钟

function showtime(){   var timerID=null;   var now=new Date();   var year=now.getYear();//当前的年  ...

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

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

炫酷时钟(css3+js)

html css *{ margin: 0; padding: 0; ...

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

function startTime() { var today = new Date() //得到当前时间对象 var h = today.getHours() //现在的小时数 var m ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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