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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
JS实现网页烟花动画效果
Mar 10 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
域名查询代码公布
2006/10/09 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Vue shopCart 组件开发详解
2018/01/26 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python Django连接MySQL数据库做增删改查
2013/11/07 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现对输入的密文加密
2019/03/20 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
大学三年的自我评价
2013/12/25 职场文书
八项规定整改措施
2014/02/12 职场文书
怀念母亲教学反思
2014/04/28 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript