新H5中用canvas画一个数字钟表

最新推荐文章于 2024-04-02 16:45:14 发布

Leon.D

最新推荐文章于 2024-04-02 16:45:14 发布

阅读量798

点赞数

分类专栏： canvas 文章标签： canvas js

本文链接：https://blog.csdn.net/weixin_43792981/article/details/84475451

版权

canvas 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

此文章是参考以往大牛代码，在大牛代码基础上加以更改而成。

本人暂时还是一名技术菜鸟，刚刚踏上web前端这条路才五个月，希望大牛们多多提携。。。

效果图如下：

话不多说，上代码：

   var now = new Date;
   var hour = now.getHours();
   var min = now.getMinutes();
   var sec = now.getSeconds();
   var msec = now.getMilliseconds();
   hour = hour >= 10 ? hour : "0" + hour;
   min = min >= 10 ? min : "0" + min;
   sec = sec >= 10 ? sec : "0" + sec;
   msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;

   bdigital(m, n, hour);
   bdigital(m + 160, n, min);
   bdigital(m + 320, n, sec);

   //两位数的显示
   function bdigital(x, y, num) {
   var ge = num % 10;
   var shi = (parseInt(num / 10)) % 10;
   digital(x, y, shi);
   digital(x + 70, y, ge);
   }

   //画：
   //小时与分钟之间的点
   cxt.lineWidth = 5;
   cxt.strokeStyle = "#000";
   cxt.fillStyle = "#000";
   cxt.beginPath();
   cxt.arc(m + 150, n + 80, 3, 0, 360, false);
   cxt.fill();
   cxt.closePath();
   cxt.stroke();

   cxt.lineWidth = 5;
   cxt.strokeStyle = "#000";
   cxt.fillStyle = "#000";
   cxt.beginPath();
   cxt.arc(m + 150, n + 50, 3, 0, 360, false);
   cxt.fill();
   cxt.closePath();
   cxt.stroke();

   //分钟与秒之间的点
   cxt.lineWidth = 5;
   cxt.strokeStyle = "#000";
   cxt.fillStyle = "#000";
   cxt.beginPath();
   cxt.arc(m + 310, n + 80, 3, 0, 360, false);
   cxt.fill();
   cxt.closePath();
   cxt.stroke();

   cxt.lineWidth = 5;
   cxt.strokeStyle = "#000";
   cxt.fillStyle = "#000";
   cxt.beginPath();
   cxt.arc(m + 310, n + 50, 3, 0, 360, false);
   cxt.fill();
   cxt.closePath();
   cxt.stroke();
   }

   //显示一位数字
   function digital(x, y, num) {
   //设置风格
   cxt.lineWidth = 6;
   cxt.strokeStyle = "#41216e";

   //a
   function a() {
   cxt.beginPath();
   cxt.moveTo(x + 10, y);
   cxt.lineTo(x + 60, y);
   cxt.closePath();
   cxt.stroke();
   }

   //b
   function b() {
   cxt.beginPath();
   cxt.moveTo(x + 65, y + 5);
   cxt.lineTo(x + 65, y + 55);
   cxt.closePath();
   cxt.stroke();
   }

   //c
   function c() {
   cxt.beginPath();
   cxt.moveTo(x + 65, y + 62);
   cxt.lineTo(x + 65, y + 110);
   cxt.closePath();
   cxt.stroke();
   }

   //d
   function d() {
   cxt.beginPath();
   cxt.moveTo(x + 60, y + 115);
   cxt.lineTo(x + 10, y + 115);
   cxt.closePath();
   cxt.stroke();
   }

   //e
   function e() {
   cxt.beginPath();
   cxt.moveTo(x + 5, y + 110);
   cxt.lineTo(x + 5, y + 60);
   cxt.closePath();
   cxt.stroke();
   }

   //f
   function f() {
   cxt.beginPath();
   cxt.moveTo(x + 5, y + 55);
   cxt.lineTo(x + 5, y + 5);
   cxt.closePath();
   cxt.stroke();
   }

   //g
   function g() {
   cxt.beginPath();
   cxt.moveTo(x + 10, y + 57.5);
   cxt.lineTo(x + 60, y + 57.5);
   cxt.closePath();
   cxt.stroke();
   }

   //0
   function zero() {
   a(); b(); c(); d(); e(); f();
   }
   //1
   function one() {
   b(); c();
   }
   //2
   function two() {
   a(); b(); d(); e(); g();
   }
   //3
   function three() {
   a(); b(); c(); d(); g();
   }
   //4
   function four() {
   b(); c(); f(); g();
   }
   //5
   function five() {
   a(); c(); d(); f(); g();
   }
   //6
   function six() {
   a(); c(); d(); e(); f(); g();
   }
   //7
   function seven() {
   a(); b(); c();
   }
   //8
   function eight() {
   a(); b(); c(); d(); e(); f(); g();
   }
   //9
   function nine() {
   a(); b(); c(); d(); f(); g();
   }

   //数字n
   function number(n) {
   switch (n) {
   case 0: zero(); break;
   case 1: one(); break;
   case 2: two(); break;
   case 3: three(); break;
   case 4: four(); break;
   case 5: five(); break;
   case 6: six(); break;
   case 7: seven(); break;
   case 8: eight(); break;
   case 9: nine(); break;
   }
   }
   number(num);
   }