JavaScript canvas实现文字时钟


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下

先看看效果图

JavaScript canvas实现文字时钟

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvas id="myCanvas" width="600" height="600">您的浏览器不支持canvas</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.translate(300,300);

 function Clock(ctx){
 this.ctx = ctx; // canvas 2d画笔
 this.h = ''; // 小时
 this.m = ''; // 分钟
 this.s = ''; // 秒钟
 this.year = ''; // 年份
 this.mon = ''; // 月份
 this.da = ''; // 日期
 this.day = ''; // 星期
 this.timer = null; // 定时器

 this.numberText = ['零','一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十','三十一']; 
 this.H=['零点','一点','二点','三点','四点','五点','六点','七点','八点','九点','十点','十一点','十二点','十三点','十四点','十五点','十六点','十七点','十八点','十九点','二十点','二十一点','二十二点','二十三点'];
 this.M=['零分','一分','二分','三分','四分','五分','六分','七分','八分','九分','十分','十一分','十二分','十三分','十四分','十五分','十六分','十七分','十八分','十九分','二十分','二一分','二十二分','二十三分','二十四分','二十五分','二十六分','二十七分','二十八分','二十九分','三十分','三十一分','三十二分','三十三分','三十四分','三十五分','三十六分','三十七分','三十八分','三十九分','四十分','四十一分','四十二分','四十三分','四十四分','四十五分','四十六分','四十七分','四十八分','四十九分','五十分','五十一分','五十二分','五十三分','五十四分','五十五分','五十六分','五十七分','五十八分','五十九分'];
 this.S=['零秒','一秒','二秒','三秒','四秒','五秒','六秒','七秒','八秒','九秒','十秒','十一秒','十二秒','十三秒','十四秒','十五秒','十六秒','十七秒','十八秒','十九秒','二十秒','二一秒','二十二秒','二十三秒','二十四秒','二十五秒','二十六秒','二十七秒','二十八秒','二十九秒','三十秒','三十一秒','三十二秒','三十三秒','三十四秒','三十五秒','三十六秒','三十七秒','三十八秒','三十九秒','四十秒','四十一秒','四十二秒','四十三秒','四十四秒','四十五秒','四十六秒','四十七秒','四十八秒','四十九秒','五十秒','五十一秒','五十二秒','五十三秒','五十四秒','五十五秒','五十六秒','五十七秒','五十八秒','五十九秒'];
 
 this.draw = function(){
  this.ctx.clearRect(-300,-300,600,600);
  // 中心小黑圆
  this.ctx.beginPath();
  this.ctx.arc(0,0,5,0,Math.PI*2,true);
  this.ctx.fill();
  this.ctx.closePath();
  // 画长横线
  this.ctx.beginPath();
  this.ctx.moveTo(0,0);
  this.ctx.lineTo(280,0);
  this.ctx.strokeStyle='#000';
  this.ctx.stroke();
  this.ctx.beginPath();
  this.ctx.font='12px 微软雅黑';
  var yearText = '';
  var arr = String(this.year).split('');
  for(var n=0;n<arr.length;n++){
  var num = Number(arr[n]);
  yearText += this.numberText[num];
  }
  var weekday = this.day === 0 ? '星期日': '星期'+this.numberText[this.day]; // 星期
  var moText = this.numberText[this.mon]+'月'+ this.numberText[this.da]+'日';
  this.ctx.fillText(yearText+'年',10,-10); // 年份的文字
  this.ctx.fillText(moText,10,20); // 月份/日期/星期的文字 
  this.ctx.fillText(weekday,10,40); // 月份/日期/星期的文字 

  this.drawClock();
 }
 // 画刻度
 this.drawClock = function(){
  // 时钟
  this.ctx.save(); // 保存当前状态
  this.ctx.rotate(Math.PI / 12 * this.h);
  for(var j=0; j < 24;j++){
  this.ctx.beginPath();
  var color = j === this.h ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.font='12px 微软雅黑';
  this.ctx.strokeText(this.H[j],110,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 12);
  }
  this.ctx.restore(); // 恢复到上一次的状态
  

  // 分钟
  this.ctx.save(); 
  this.ctx.rotate(Math.PI / 30 * this.m);
  for (var i=0; i < 60; i++){
  this.ctx.beginPath();
  var color = i === this.m ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.strokeText(this.M[i],170,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  

  // 秒钟
  this.ctx.save();
  this.ctx.rotate(Math.PI / 30 * this.s);
  for (var k=0; k < 60; k++){
  this.ctx.beginPath();
  var color = k === this.s ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.strokeText(this.S[k],230,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  // ctx.rotate(-Math.PI / 30 * this.s);
 }
 // 初始化
 this.init = function(){
  var that = this;
  this.timer = setInterval(function(){
  that.setTime();
  that.draw();
  },100);
 }
 // 停止
 this.stop = function(){
  clearInterval(this.timer);
  this.timer = null;
 }
 // 设置时间
 this.setTime = function(){
  var date = new Date();
  this.year = date.getFullYear(); // 年, int
  this.mon = date.getMonth()+1; // 月分, int
  this.da = date.getDate(); // 日期, int
  this.day = date.getDay(); // 星期, int


  var hour = date.getHours(); // 时,int
  var minu = date.getMinutes(); // 分,int
  var sec = date.getSeconds(); // 秒,int
  
 // 毫秒数/1000 ,这里主要是为了做帧动画
  var minuScond = date.getMilliseconds()/1000;

  var second; // 秒,计算秒旋转的角度, float
  var minute; // 分,计算分钟的角度,float
  var ho; // 小时,计算小时的角度,float

  if(minuScond > 0.8){
  second = Math.ceil(sec+ minuScond);
  second = second >= 60? 0:second;
  } else {
  second = sec+ minuScond;
  }
  // 秒钟到了59,分钟要过渡
  if(sec === 59) {
  if(minuScond >= 0.8){
   minute = Math.ceil(minu+ minuScond);
   minute = minute >=60 ? 0: minute;
  } else{
   minute = minu + minuScond;
  }
  } else{
  minute = minu;
  }
  // 秒数到了59和分钟数到了59;时针要过渡
  if(sec === 59 && minu===59){
  if(minuScond >= 0.8){
   ho = Math.ceil(hour+ minuScond);
   ho = ho >=24 ? 0: ho;
  } else{
   ho = hour + minuScond;
  }
  } else{
  ho = hour;
  }
  this.h = ho; // 小时
  this.m = minute; // 分钟
  this.s = second; // 秒钟
 }
 }
 var clock = new Clock(ctx);
 clock.init();
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
JS代码实现页面切换效果
Jan 10 #Javascript
原生JavaScript实现购物车
Jan 10 #Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 #Javascript
JS实现公告上线滚动效果
Jan 10 #Javascript
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
深入extjs与php参数交互的详解
2013/06/25 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现货币换算的方法
2014/11/29 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
心理健康教育制度
2014/01/27 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
教师工作决心书
2015/02/04 职场文书
商务宴会祝酒词
2015/08/11 职场文书
python pyhs2 的安装操作
2021/04/07 Python
python flask开发的简单基金查询工具
2021/06/02 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python