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

先看看效果图

代码

		
<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <metaname="viewport"content="width=device-width, initial-scale=1.0">
 <metahttp-equiv="X-UA-Compatible"content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvasid="myCanvas"width="600"height="600">您的浏览器不支持canvas</canvas>
<>
 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++){
  varnum=Number(arr[n]);
  yearText += this.numberText[num];
  }
  varweekday=this.day === 0 ? '星期日': '星期'+this.numberText[this.day]; // 星期
  varmoText=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(varj=0; j < 24;j++){
  this.ctx.beginPath();
  varcolor=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 (vari=0; i < 60; i++){
  this.ctx.beginPath();
  varcolor=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 (vark=0; k < 60; k++){
  this.ctx.beginPath();
  varcolor=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(){
  varthat=this;
  this.timer=setInterval(function(){
  that.setTime();
  that.draw();
  },100);
 }
 // 停止
 this.stop=function(){
  clearInterval(this.timer);
  this.timer=null;
 }
 // 设置时间
 this.setTime=function(){
  vardate=newDate();
  this.year=date.getFullYear(); // 年, int
  this.mon=date.getMonth()+1; // 月分, int
  this.da=date.getDate(); // 日期, int
  this.day=date.getDay(); // 星期, int
 
 
  varhour=date.getHours(); // 时,int
  varminu=date.getMinutes(); // 分,int
  varsec=date.getSeconds(); // 秒,int
   
 // 毫秒数/1000 ,这里主要是为了做帧动画
  varminuScond=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();
</>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。

JavaScript canvas实现文字时钟的更多相关文章

  1. JavaScript 防盗链的原理以及破解方法

    背景前段日子 在自学做项目的时候发现 明明在项目中引用了线上存在的图片 但是在自己的项目中却怎么也显示出来查阅资料后......

  2. JavaScript中的Proxy对象

    Js中Proxy对象Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。语法const......

  3. javascript 数组(list)添加/删除的实现

    javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度p......

  4. JavaScript 如何禁止用户保存图片

    场景 在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。 思路 添加事件禁止选择、拖拽、右键(简单的禁......

  5. JavaScript如何操作css

    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了di......

  6. JavaScript canvas实现文字时钟

    本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下 先看看效果图 代码 &l......

  7. JavaScript实现浏览器网页自动滚动并点击的示例代码

    1. 打开浏览器控制台窗口JavaScript通常是作为开发Web页面的脚本语言,本文介绍的JavaScript代码......

  8. 详解JavaScript中的链式调用

    链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。描述......

  9. 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 h......

  10. 如何使用 JavaScript 操作浏览器历史记录 API

    History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你......

随机推荐

  1. JavaScript如何操作css

    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了di......

  2. php中数组最简单的使用方法

    我们在说映射的时候,有些小伙伴就会联想到数组,没错,因为数组就是用了映射的思想。这里很多刚学php的小伙伴对概念不是......

  3. 用Python自动清理电脑内重复文件,只要10行代码(自动脚本)

    给定一个文件夹,使用Python检查给定文件夹下有无文件重复,若存在重复则删除主要涉及的知识点有:os模块综合应用g......

  4. java 最新Xss攻击与防护(全方位360°详解)

    前沿XSS防范属于前端还是后端的责任 ?XSS 防范是后端 RD(研发人员)的责任,后端 RD 应该在所有用户提交数......

  5. asp.net core集成CKEditor实现图片上传功能的示例代码

    背景本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,......

  6. C#实现简单的五子棋游戏

    最近利用业余时间写了一个简单的五子棋游戏,没有利用深层次的面向对象技术,自学一年,代码和程序设计有不妥之处,还望大神......

  7. C++ 入门篇

    C++基础入门 1 C++初识 1.1 第一个C++程序 编写一个C++程序总共分为4个步骤 创建项目 ......

  8. 浅谈ASP.NET Core中IOC与DI的理解和使用

    说起IOC和DI,使用过ASP.NET Core的人对这两个概念一定不陌生,早前,自己也有尝试过去了解这两个东西,但......

  9. 如何使用 JavaScript 操作浏览器历史记录 API

    History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你......

  10. 五分钟学会怎么用Pygame做一个简单的贪吃蛇

    Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上开发。我们今天将利用它来制作......