欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

js Canvas实现的日历时钟案例有哪些

来源:本站整理 作者:佚名 时间:2016-12-31 TAG: 我要投稿


Html:
 charset="UTF-8">
Document
 src="requestNextAnimationFrame.js">
 src="calendarWithTime.js">
* {margin:0; padding:0;}
#calendarWithTime{
 margin : 0;
}
 id="calendarWithTime">
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, 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,0.1,date.getSeconds(),0,30,'s','');
 this.drawYMDHMS(0,0.3,0,0.05,date.getMinutes(),date.getSeconds()/60,30,'m','');
 this.drawYMDHMS(0,0.25,0,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.4,0.568,(date.getMonth()),date.getDate()/(allDays+1),6,'M',date.getMonth()+1);
 this.drawYMDHMS(0.4,0.55,0.4,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,0);
 this.ctxtObj.strokeText(this.timeNow,0,0);
 this.ctxtObj.restore();
 /*
 fillText(String text,float x,float y,[float maxwidth]):填充字符串
 strokeText(String text,float x,float y,[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;

[1] [2] [3] [4]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载