https://www.xuanmo.xin/1388.html

凑个数,canvas绘制时钟

发布于 分类: Html5 & CSS3案例 5 2112

许久不更新了一样,用以前学习作业凑个数,canvas绘制的时钟,效果图:

canvas_clock

js代码


  var canvas = document.getElementById('canvas');
  var can = canvas.getContext('2d');
  clock();
  setInterval(clock,1000);
  function clock(){
    can.clearRect(0,0,canvas.width,canvas.height);
    // 获取时间
    var nowTime = new Date();
    var H = nowTime.getHours();
    var M = nowTime.getMinutes();
    var S = nowTime.getSeconds();
    H = H + M/60;
    M = M + S/60;
    can.strokeStyle = '#1A1A1A';
    can.lineWidth = 10;
    // 绘制表盘
    can.save();
    can.translate(150,150);
    can.beginPath();
    can.arc(0,0,150,0,Math.PI*2,false);
    can.stroke();
    can.restore();
    // 绘制数字
    for( var i=1; i<=12; i++ ){
      can.save();
      can.translate(150,150);
      can.rotate(i*30*Math.PI/180);
      can.font = '24px microsoft yahei';
      can.fillStyle = '#B0FC4D';
      can.textBaseline = 'top';
      can.textAlign = 'center';
      can.shadowOffsetX = 1;
      can.shadowOffsetY = 1;
      can.shadowOffsetY = 2;
      can.shadowBlur = 3;
      can.shadowColor = '#fff';
      can.fillText(i,0,-140);
      can.restore();
      // 时的小原点
      can.save();
      can.translate(150,150);
      can.rotate(i*30*Math.PI/180);
      can.beginPath();
      can.arc(0,-105,2,0,2*Math.PI,false);
      can.lineWidth = 3;
      can.fillStyle = '#E6FFD4';
      can.fill();
      can.restore();
    }
    // 绘制时钟分刻度
    for( var i=0; i<60; i++ ){
      can.save();
      can.translate(150,150);
      can.rotate(i*6*Math.PI/180);
      can.beginPath();
      can.arc(0,-105,1,0,2*Math.PI,false);
      can.lineWidth = 3;
      can.fillStyle = '#E6FFD4';
      can.fill();
      can.restore();
    }
    // 绘制时针
     time( H*30 , -70 , 7 );
    // 绘制分针
    time( M*6 , -90 , 5 );
    // 绘制秒针
    time( S*6 , -100 , 2 );
    // 绘制中心原点
    can.save();
    can.translate(150,150);
    can.beginPath();
    can.arc(0,0,4,0,2*Math.PI,false);
    can.fillStyle = '#626262';
    can.fill();
    can.restore();
    // 时 分 秒封装
    function time( rotate,range,lineW ){
      can.save();
      can.translate(150,150);
      can.rotate(rotate*Math.PI/180);
      can.beginPath();
      can.moveTo(0,10);
      can.lineTo(0,range);
      can.closePath();
      can.lineJoin = 'round';
      can.lineWidth = lineW;
      can.stroke();
      can.restore();
    }
  }

DEMO展示

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

  • 增达网 山东省潍坊市 联通

    回复

    你的博客就像冬天里的一把火!

    • 孤标傲世 北京市 北京宽带通电信技术有限公司

      回复

      @增达网 哥们 你的网站不错 很符合我的风格 所以我决定盗版了 还有你的顶部的下滑箭头应该点击下滑
      css:
      div.first-screen i.icon-menu-up {
      z-index:10000;//添加
      }
      js:
      //上啦箭头
      $(‘.icon-menu-up’).click(function() {
      $(‘body’).animate({
      scrollTop: $(window).height()
      }, 800);
      });

      • xuanmo 北京市 鹏博士长城宽带

        @孤标傲世 我这个你还盗版,不过你喜欢就用吧,源码都在Github放着,感谢建议

      • 孤标傲世 北京市 北京宽带通电信技术有限公司

        @孤标傲世 没有看你github上面的源码 你是用的wordpress模板写的 但是我想用免费的 就选择了github的page了.所以直接爬取了代码..网址是https://gesnowboy.github.io/demo/ 现在只是把你的主页给换了一下 后期可能就直接大换血了 不过你的主题真的很好 不过后来我发现了另外一个人的http://sunxiaobiu.github.io 和你的差不多 可以直接一直到到github上 现在犹豫用那个了

      • xuanmo 广东省广州市 联通

        @孤标傲世 还能这样扒,涨知识了,厉害了

已经没有了!