• 售前

  • 售后

热门帖子
入门百科

JavaScript canvas实现笔墨时钟

[复制链接]
123457321 显示全部楼层 发表于 2021-10-25 18:38:34 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下
先看看效果图

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <canvas id="myCanvas" width="600" height="600">您的浏览器不支持canvas</canvas>
  11. <script>
  12. var c=document.getElementById("myCanvas");
  13. var ctx=c.getContext("2d");
  14. ctx.translate(300,300);
  15. function Clock(ctx){
  16. this.ctx = ctx; // canvas 2d画笔
  17. this.h = ''; // 小时
  18. this.m = ''; // 分钟
  19. this.s = ''; // 秒钟
  20. this.year = ''; // 年份
  21. this.mon = ''; // 月份
  22. this.da = ''; // 日期
  23. this.day = ''; // 星期
  24. this.timer = null; // 定时器
  25. this.numberText = ['零','一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十','三十一'];
  26. this.H=['零点','一点','二点','三点','四点','五点','六点','七点','八点','九点','十点','十一点','十二点','十三点','十四点','十五点','十六点','十七点','十八点','十九点','二十点','二十一点','二十二点','二十三点'];
  27. this.M=['零分','一分','二分','三分','四分','五分','六分','七分','八分','九分','十分','十一分','十二分','十三分','十四分','十五分','十六分','十七分','十八分','十九分','二十分','二一分','二十二分','二十三分','二十四分','二十五分','二十六分','二十七分','二十八分','二十九分','三十分','三十一分','三十二分','三十三分','三十四分','三十五分','三十六分','三十七分','三十八分','三十九分','四十分','四十一分','四十二分','四十三分','四十四分','四十五分','四十六分','四十七分','四十八分','四十九分','五十分','五十一分','五十二分','五十三分','五十四分','五十五分','五十六分','五十七分','五十八分','五十九分'];
  28. this.S=['零秒','一秒','二秒','三秒','四秒','五秒','六秒','七秒','八秒','九秒','十秒','十一秒','十二秒','十三秒','十四秒','十五秒','十六秒','十七秒','十八秒','十九秒','二十秒','二一秒','二十二秒','二十三秒','二十四秒','二十五秒','二十六秒','二十七秒','二十八秒','二十九秒','三十秒','三十一秒','三十二秒','三十三秒','三十四秒','三十五秒','三十六秒','三十七秒','三十八秒','三十九秒','四十秒','四十一秒','四十二秒','四十三秒','四十四秒','四十五秒','四十六秒','四十七秒','四十八秒','四十九秒','五十秒','五十一秒','五十二秒','五十三秒','五十四秒','五十五秒','五十六秒','五十七秒','五十八秒','五十九秒'];
  29. this.draw = function(){
  30.   this.ctx.clearRect(-300,-300,600,600);
  31.   // 中心小黑圆
  32.   this.ctx.beginPath();
  33.   this.ctx.arc(0,0,5,0,Math.PI*2,true);
  34.   this.ctx.fill();
  35.   this.ctx.closePath();
  36.   // 画长横线
  37.   this.ctx.beginPath();
  38.   this.ctx.moveTo(0,0);
  39.   this.ctx.lineTo(280,0);
  40.   this.ctx.strokeStyle='#000';
  41.   this.ctx.stroke();
  42.   this.ctx.beginPath();
  43.   this.ctx.font='12px 微软雅黑';
  44.   var yearText = '';
  45.   var arr = String(this.year).split('');
  46.   for(var n=0;n<arr.length;n++){
  47.   var num = Number(arr[n]);
  48.   yearText += this.numberText[num];
  49.   }
  50.   var weekday = this.day === 0 ? '星期日': '星期'+this.numberText[this.day]; // 星期
  51.   var moText = this.numberText[this.mon]+'月'+ this.numberText[this.da]+'日';
  52.   this.ctx.fillText(yearText+'年',10,-10); // 年份的文字
  53.   this.ctx.fillText(moText,10,20); // 月份/日期/星期的文字
  54.   this.ctx.fillText(weekday,10,40); // 月份/日期/星期的文字
  55.   this.drawClock();
  56. }
  57. // 画刻度
  58. this.drawClock = function(){
  59.   // 时钟
  60.   this.ctx.save(); // 保存当前状态
  61.   this.ctx.rotate(Math.PI / 12 * this.h);
  62.   for(var j=0; j < 24;j++){
  63.   this.ctx.beginPath();
  64.   var color = j === this.h ? '#000': '#ccc';
  65.   this.ctx.strokeStyle = color;
  66.   this.ctx.font='12px 微软雅黑';
  67.   this.ctx.strokeText(this.H[j],110,-5);
  68.   this.ctx.closePath();
  69.   this.ctx.rotate(-Math.PI / 12);
  70.   }
  71.   this.ctx.restore(); // 恢复到上一次的状态
  72.   
  73.   // 分钟
  74.   this.ctx.save();
  75.   this.ctx.rotate(Math.PI / 30 * this.m);
  76.   for (var i=0; i < 60; i++){
  77.   this.ctx.beginPath();
  78.   var color = i === this.m ? '#000': '#ccc';
  79.   this.ctx.strokeStyle = color;
  80.   this.ctx.strokeText(this.M[i],170,-5);
  81.   this.ctx.closePath();
  82.   this.ctx.rotate(-Math.PI / 30);
  83.   }
  84.   this.ctx.restore();
  85.   
  86.   // 秒钟
  87.   this.ctx.save();
  88.   this.ctx.rotate(Math.PI / 30 * this.s);
  89.   for (var k=0; k < 60; k++){
  90.   this.ctx.beginPath();
  91.   var color = k === this.s ? '#000': '#ccc';
  92.   this.ctx.strokeStyle = color;
  93.   this.ctx.strokeText(this.S[k],230,-5);
  94.   this.ctx.closePath();
  95.   this.ctx.rotate(-Math.PI / 30);
  96.   }
  97.   this.ctx.restore();
  98.   // ctx.rotate(-Math.PI / 30 * this.s);
  99. }
  100. // 初始化
  101. this.init = function(){
  102.   var that = this;
  103.   this.timer = setInterval(function(){
  104.   that.setTime();
  105.   that.draw();
  106.   },100);
  107. }
  108. // 停止
  109. this.stop = function(){
  110.   clearInterval(this.timer);
  111.   this.timer = null;
  112. }
  113. // 设置时间
  114. this.setTime = function(){
  115.   var date = new Date();
  116.   this.year = date.getFullYear(); // 年, int
  117.   this.mon = date.getMonth()+1; // 月分, int
  118.   this.da = date.getDate(); // 日期, int
  119.   this.day = date.getDay(); // 星期, int
  120.   var hour = date.getHours(); // 时,int
  121.   var minu = date.getMinutes(); // 分,int
  122.   var sec = date.getSeconds(); // 秒,int
  123.   
  124. // 毫秒数/1000 ,这里主要是为了做帧动画
  125.   var minuScond = date.getMilliseconds()/1000;
  126.   var second; // 秒,计算秒旋转的角度, float
  127.   var minute; // 分,计算分钟的角度,float
  128.   var ho; // 小时,计算小时的角度,float
  129.   if(minuScond > 0.8){
  130.   second = Math.ceil(sec+ minuScond);
  131.   second = second >= 60? 0:second;
  132.   } else {
  133.   second = sec+ minuScond;
  134.   }
  135.   // 秒钟到了59,分钟要过渡
  136.   if(sec === 59) {
  137.   if(minuScond >= 0.8){
  138.    minute = Math.ceil(minu+ minuScond);
  139.    minute = minute >=60 ? 0: minute;
  140.   } else{
  141.    minute = minu + minuScond;
  142.   }
  143.   } else{
  144.   minute = minu;
  145.   }
  146.   // 秒数到了59和分钟数到了59;时针要过渡
  147.   if(sec === 59 && minu===59){
  148.   if(minuScond >= 0.8){
  149.    ho = Math.ceil(hour+ minuScond);
  150.    ho = ho >=24 ? 0: ho;
  151.   } else{
  152.    ho = hour + minuScond;
  153.   }
  154.   } else{
  155.   ho = hour;
  156.   }
  157.   this.h = ho; // 小时
  158.   this.m = minute; // 分钟
  159.   this.s = second; // 秒钟
  160. }
  161. }
  162. var clock = new Clock(ctx);
  163. clock.init();
  164. </script>
  165. </body>
  166. </html>
复制代码
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作