微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

js Canvas实现的日历时钟案例分享

分类：JavaScript作者：编程之家AI导航网

<p style="text-align: center">

Html:

rush:xhtml;"> <Meta charset="UTF-8"> Document

js:

rush:js;"> ;var calendarWithTime = function(){ v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1; // 浏览器可见区域 appWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); appHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 3; // chrome下，高度一样是，会出现下拉滚动条 // 中心点 centerPoint = {'x':appWidth*0.5,'y':appHeight*0.5}; // 动画用 lastFpsUpdateTime = (+new Date); // canvas对象 caObj = null; // canvas context对象 ctxtObj = null; // 现在时间 timeNow = ""; // 开始年份 startY = 1988; init = function(){ window.onload=function(){this.initCanvas();} }(); getDomId = function(id){return document.getElementById(id);} initCanvas = function(id){ this.caObj = this.getDomId("calendarWithTime"); this.ctxtObj = this.caObj.getContext("2d"); // 全屏canvas this.caObj.style.width = (this.appWidth+'px'); this.caObj.style.height = (this.appHeight+'px'); this.caObj.width = this.appWidth; this.caObj.height = this.appHeight; if (v) { caObj.style.border = "none"; } // 开始年份 startY = Math.floor((new Date()).getFullYear() / 8) * 8; // test // startY = Math.floor(2010 / 8) * 8; this.lastFpsUpdateTime = (+new Date); this.animate(); } doDraw = function(){ this.ctxtObj.clearRect(0,this.caObj.width,this.caObj.height); var date = new Date(); // test /*date.setDate(29); date.setMonth(3); date.setFullYear(2010);*/ var afterGap = 8 - (date.getFullYear() - startY); var allYears = date.getFullYear()-this.startY+afterGap; var allDays = this.getCountDays(date.getFullYear(),date.getMonth()); this.doDrawDayPanel(31,allDays); this.doDrawMonthPanel(); this.doDrawYearPanel(this.startY,date.getFullYear(),afterGap); // 画时间针 this.doDrawTPanel(); this.drawYMDHMS(0,0.35,0.1,date.getSeconds(),30,'s',''); this.drawYMDHMS(0,0.3,0.05,date.getMinutes(),date.getSeconds()/60,'m',0.25,0.03,date.getHours() % 12,date.getMinutes()/60,6,'h',''); this.drawYMDHMS(0.4,0.7,0.4,0.66,date.getDate(),date.getHours()/24,Math.ceil(31*0.5),'d',date.getDate()); this.drawYMDHMS(0.4,0.6,0.568,(date.getMonth()),date.getDate()/(allDays+1),'M',date.getMonth()+1); this.drawYMDHMS(0.4,0.55,0.52,(date.getFullYear() - this.startY),(date.getMonth()+1)/13,Math.ceil(allYears*0.5),'y',date.getFullYear()); // 显示时间 this.getTimeNow(); this.ctxtObj.save(); this.ctxtObj.beginPath(); this.ctxtObj.fillStyle = "#369"; this.ctxtObj.strokeStyle = "#369"; this.ctxtObj.font = "30px bold 微软雅黑"; this.ctxtObj.textAlign="start"; this.ctxtObj.textBaseline="top"; this.ctxtObj.fillText(this.timeNow,0); this.ctxtObj.strokeText(this.timeNow,0); this.ctxtObj.restore(); /* fillText(String text,float x,float y,[float maxwidth]):填充字符串 strokeText(String text,[float maxwidth])：绘制边框 font="bold 45px 宋体" textAlign：设置绘制字符串的水平对齐方式,start|end|right|center textBaseline：垂直对齐方式：top|hanging|middle|alphabetic|bottom */ } doChangetoFront = function(i,x){ // 转换为画面值 return (i +Math.ceil(x/4)) % 60; } doChangetoEnd = function(i,x){ // 转换为后台值 return (i +Math.ceil(x/4*3)) % 60; } doDrawTPanel = function(){ // 画时钟面板 var minsLen = Math.min( this.caObj.width,this.caObj.height)*0.5*0.3; var mineLen = Math.min( this.caObj.width,this.caObj.height)*0.5*0.32; var maxsLen = Math.min( this.caObj.width,this.caObj.height)*0.5*0.28; var maxeLen = Math.min( this.caObj.width,this.caObj.height)*0.5*0.34; var gap = Math.PI/30; futoNum = 5; this.ctxtObj.save(); this.ctxtObj.fillStyle = "#369"; this.ctxtObj.strokeStyle = "#369"; for(var i =0;i<=59;i++){ if(i % futoNum==0){ sLen = maxsLen; eLen = maxeLen; }else{ sLen = minsLen; eLen = mineLen; } this.ctxtObj.beginPath(); this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x,Math.sin(i*gap)*sLen + this.centerPoint.y); this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y); this.ctxtObj.stroke(); this.ctxtObj.closePath(); /*iDiff = this.doChangeToFront(i); // i => iDiff //iDiff2 = this.doChangetoEnd(iDiff,60); // iDiff => i this.ctxtObj.font = "2px bold 微软雅黑"; this.ctxtObj.textAlign="center" this.ctxtObj.textBaseline="middle" this.ctxtObj.fillText(iDiff,Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y); */

}
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,Math.min( this.caObj.width,this.caObj.height)0.50.01,360,false);
this.ctxtObj.fillStyle="red";
this.ctxtObj.fill();
this.ctxtObj.closePath();
this.ctxtObj.restore();
}
doDrawYearPanel = function(startYear,NowYear,afterGap){
// 画年份面板
var sLen = Math.min( this.caObj.width,this.caObj.height)0.50.53;
var eLen = Math.min( this.caObj.width,this.caObj.height)0.50.55;
var labelLen = Math.min( this.caObj.width,this.caObj.height)0.50.60;
var allYears = NowYear-startYear+afterGap;
var gap = Math.PI/Math.ceil(allYears0.5);
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#b4ffff";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,eLen+2,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.fillStyle = "white";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,sLen-2,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.restore();
this.ctxtObj.fillStyle = "#369";
this.ctxtObj.strokeStyle = "#369";
for(var i =-2;i<=allYears-3;i++){
this.ctxtObj.save();
this.ctxtObj.beginPath();
this.ctxtObj.moveto(Math.cos(igap)sLen + this.centerPoint.x,Math.sin(igap)eLen + this.centerPoint.y);
this.ctxtObj.closePath();
this.ctxtObj.stroke();
iDiff = this.doChangetoFront(i,allYears) + startYear;
this.ctxtObj.translate(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(igap);
this.ctxtObj.font = "10px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="bottom";
this.ctxtObj.fillText(iDiff,sLen,0);
this.ctxtObj.restore();
}
}
doDrawMonthPanel = function(){
// 画年份面板
var sLen = Math.min( this.caObj.width,this.caObj.height)0.50.58;
var eLen = Math.min( this.caObj.width,this.caObj.height)0.50.6;
var labelLen = Math.min( this.caObj.width,this.caObj.height)0.50.70;
var gap = Math.PI/6;
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#fde08c";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.restore();
this.ctxtObj.fillStyle = "#369";
this.ctxtObj.strokeStyle = "#369";
for(var i =-2;i<=9;i++){
this.ctxtObj.save();
this.ctxtObj.beginPath();
this.ctxtObj.moveto(Math.cos(igap)sLen + this.centerPoint.x,Math.sin(igap)eLen + this.centerPoint.y);
this.ctxtObj.closePath();
this.ctxtObj.stroke();
iDiff = (this.doChangetoFront(i,12)) % 12+1;
this.ctxtObj.translate(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(igap);
this.ctxtObj.font = "20px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="middle";
this.ctxtObj.fillText((iDiff+'').PadLeft(2,0),eLen,0);
this.ctxtObj.restore();
}
}
doDrawDayPanel = function(dayCount,realAllDay){
// 画年份面板
var sLen = Math.min( this.caObj.width,this.caObj.height)0.50.68;
var eLen = Math.min( this.caObj.width,this.caObj.height)0.50.7;
var labelLen = Math.min( this.caObj.width,this.caObj.height)0.50.80;
var gap = Math.PI/Math.ceil(dayCount0.5);
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#e587e5";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.fillStyle = "white";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.restore();
this.ctxtObj.fillStyle = "#369";
this.ctxtObj.strokeStyle = "#369";
for(var i =-2;i<=dayCount-2;i++){
this.ctxtObj.save();
this.ctxtObj.beginPath();
this.ctxtObj.moveto(Math.cos(igap)sLen + this.centerPoint.x,dayCount)) % (dayCount+1);
if(iDiff<=realAllDay && iDiff!=0){
this.ctxtObj.translate(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(igap);
this.ctxtObj.font = "20px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="middle";
this.ctxtObj.fillText((iDiff+'').PadLeft(2,0);
}
this.ctxtObj.restore();
}
}
drawYMDHMS = function(slen,elen,cslen,celen,main,sub,gapM,type,value){
// 画日期时间针
var date = new Date();
var siM = main;
var siS = sub;
var gap = Math.PI/gapM;
var sLen = Math.min( this.caObj.width,this.caObj.height)0.5slen;
var eLen = Math.min( this.caObj.width,this.caObj.height)0.5elen;
var csLen = Math.min( this.caObj.width,this.caObj.height)0.5cslen;
var ceLen = Math.min( this.caObj.width,this.caObj.height)0.5celen;
i = this.doChangeToEnd(siM+siS,gapM2);
ci = (i+gapM) % (gapM2);
this.ctxtObj.save();
this.ctxtObj.beginPath();
if(type=='y'){
this.ctxtObj.strokeStyle="#00cece";
this.ctxtObj.lineWidth = 6;
}else if(type=='M'){
this.ctxtObj.strokeStyle="#ce9b00";
this.ctxtObj.lineWidth = 5;
}else if(type=='d'){
this.ctxtObj.strokeStyle="#bd01bd";
this.ctxtObj.lineWidth = 4;
}else if(type=='h'){
this.ctxtObj.lineWidth = 3;
}else if(type=='m'){
this.ctxtObj.lineWidth = 2;
}else if(type=='s'){
this.ctxtObj.lineWidth = 1;
}
this.ctxtObj.moveTo(Math.cos(igap)sLen + this.centerPoint.x,Math.sin(igap)sLen + this.centerPoint.y);
this.ctxtObj.lineTo(Math.cos(igap)eLen + this.centerPoint.x,Math.sin(igap)eLen + this.centerPoint.y);
this.ctxtObj.moveTo(Math.cos(cigap)csLen + this.centerPoint.x,Math.sin(cigap)csLen + this.centerPoint.y);
this.ctxtObj.lineTo(Math.cos(cigap)ceLen + this.centerPoint.x,Math.sin(cigap)ceLen + this.centerPoint.y);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.restore();
var cpi = cigap360/Math.PI;
if(type=='y'){
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#00cece";
this.ctxtObj.strokeStyle="#00cece";
this.ctxtObj.lineWidth = 8;
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,ceLen,cigap-gap0.5,cigap+gap0.5,false);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.translate(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(igap);
this.ctxtObj.font = "20px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="middle";
this.ctxtObj.lineWidth = 2;
this.ctxtObj.fillText(value + '年',eLen1.03,0);
this.ctxtObj.strokeText(value + '年',0);
this.ctxtObj.restore();
}else if(type=='M'){
this.ctxtObj.save();
this.ctxtObj.beginPath();
this.ctxtObj.fillStyle = "#ce9b00";
this.ctxtObj.strokeStyle="#ce9b00";
this.ctxtObj.lineWidth = 7;
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(igap);
this.ctxtObj.font = "20px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="middle";
this.ctxtObj.lineWidth = 2;
this.ctxtObj.fillText(value + '月',0);
this.ctxtObj.strokeText(value + '月',0);
this.ctxtObj.restore();
}else if(type=='d'){
this.ctxtObj.save();
this.ctxtObj.beginPath();
this.ctxtObj.fillStyle = "#bd01bd";
this.ctxtObj.strokeStyle="#bd01bd";
this.ctxtObj.lineWidth = 6;
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y);
this.ctxtObj.rotate(i*gap);
this.ctxtObj.font = "20px bold 微软雅黑";
this.ctxtObj.textAlign="start";
this.ctxtObj.textBaseline="middle";
this.ctxtObj.lineWidth = 2;
this.ctxtObj.fillText(value + '日',0);
this.ctxtObj.strokeText(value + '日',0);
this.ctxtObj.restore();
}
this.ctxtObj.restore();
}
animate = function(){
var now = (+new Date);
if (now - this.lastFpsUpdateTime > 60) {
this.lastFpsUpdateTime = Now;
this.doDraw();
}
window.requestNextAnimationFrame(this.animate);
}
getCountDays = function (year,month) {
var curDate = new Date();
curDate.setFullYear(year);
curDate.setMonth(month+1);
curDate.setDate(0);
return curDate.getDate();
}
getTimeNow = function(){
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
this.timeNow = date.getFullYear()

  • seperator1 + (date.getMonth()+1+'').PadLeft(2,0)
  • seperator1 + (date.getDate()+'').PadLeft(2,0)
  • " " + (date.getHours()+'').PadLeft(2,0)
  • seperator2 + (date.getMinutes()+'').PadLeft(2,0)
  • seperator2 + (date.getSeconds()+'').PadLeft(2,0)
  • '.' +(date.getMilliseconds()+'').PadLeft(3,0);
    }
    // objects
    }
    var cwt = new calendarWithTime();
    //=================================================
    String.prototype.PadLeft = function(totalWidth,paddingChar)
    {
    if ( paddingChar != null )
    {
    return this.PadHelper(totalWidth,paddingChar,false);
    } else {
    return this.PadHelper(totalWidth,' ',false);
    }
    }
    String.prototype.padright = function(totalWidth,true);
    } else {
    return this.PadHelper(totalWidth,true);
    }
    }
    String.prototype.PadHelper = function(totalWidth,isRightPadded)
    {
    if ( this.length < totalWidth)
    {
    var paddingString = new String();
    for (i = 1; i <= (totalWidth - this.length); i++)
    {
    paddingString += paddingChar;
    }
    if ( isRightPadded )
    {
    return (this + paddingString);
    } else {
    return (paddingString + this);
    }
    } else {
    return this;
    }
    }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

Canvasjs时钟

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native