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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了js Canvas实现的日历时钟案例分享，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

Html:

<Meta charset="UTF-8"> Document

js:

显示时间 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;
    }
    }

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

Canvasjs时钟时钟

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作