js Canvas实现的日历时钟案例分享
作者：望星辰 发布时间：2024-04-22 13:08:26
标签：js,Canvas,时钟
Html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="requestNextAnimationFrame.js"></script>
<script src="calendarWithTime.js"></script>
</head>
<body>
<style>
* {margin:0; padding:0;}
#calendarWithTime{
margin : 0;
}
</style>
<canvas id="calendarWithTime"></canvas>
</body>
</html>
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;
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.5*0.01,0,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.5*0.53;
var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.55;
var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.60;
var allYears = nowYear-startYear+afterGap;
var gap = Math.PI/Math.ceil(allYears*0.5);
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#b4ffff";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.fillStyle = "white";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,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(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.closePath();
this.ctxtObj.stroke();
iDiff = this.doChangeToFront(i,allYears) + startYear;
this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
this.ctxtObj.rotate(i*gap);
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.5*0.58;
var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.6;
var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.70;
var gap = Math.PI/6;
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#fde08c";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.fillStyle = "white";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,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(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.closePath();
this.ctxtObj.stroke();
iDiff = (this.doChangeToFront(i,12)) ％ 12+1;
this.ctxtObj.translate(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.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.5*0.68;
var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.7;
var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.80;
var gap = Math.PI/Math.ceil(dayCount*0.5);
this.ctxtObj.save();
this.ctxtObj.fillStyle = "#e587e5";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
this.ctxtObj.closePath();
this.ctxtObj.fill();
this.ctxtObj.fillStyle = "white";
this.ctxtObj.beginPath();
this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,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(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.closePath();
this.ctxtObj.stroke();
iDiff = (this.doChangeToFront(i,dayCount)) ％ (dayCount+1);
if(iDiff<=realAllDay && iDiff!=0){
this.ctxtObj.translate(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.fillText((iDiff+'').PadLeft(2,0),eLen,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.5*slen;
var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*elen;
var csLen = Math.min( this.caObj.width, this.caObj.height)*0.5*cslen;
var ceLen = Math.min( this.caObj.width, this.caObj.height)*0.5*celen;
i = this.doChangeToEnd(siM+siS,gapM*2);
ci = (i+gapM) ％ (gapM*2);
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(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.moveTo(Math.cos(ci*gap)*csLen + this.centerPoint.x ,Math.sin(ci*gap)*csLen + this.centerPoint.y);
this.ctxtObj.lineTo(Math.cos(ci*gap)*ceLen + this.centerPoint.x,Math.sin(ci*gap)*ceLen + this.centerPoint.y);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.restore();
var cpi = ci*gap*360/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,this.centerPoint.y,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.translate(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 + '年',eLen*1.03,0);
this.ctxtObj.strokeText(value + '年',eLen*1.03,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,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.translate(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 + '月',eLen*1.03,0);
this.ctxtObj.strokeText(value + '月',eLen*1.03,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,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
this.ctxtObj.stroke();
this.ctxtObj.closePath();
this.ctxtObj.translate(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 + '日',eLen*1.03,0);
this.ctxtObj.strokeText(value + '日',eLen*1.03,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, paddingChar)
{
if ( paddingChar != null )
{
return this.PadHelper(totalWidth, paddingChar, true);
} else {
return this.PadHelper(totalWidth, ' ', true);
}
}
String.prototype.PadHelper = function(totalWidth, paddingChar, 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;
}
}
来源：http://www.cnblogs.com/wangxinsheng/p/6219688.html
0
投稿猜你喜欢
- 整理了一下python 中文件的输入输出及主要介绍一些os模块中对文件系统的操作。文件输入输出1、内建函数open(file_name，文件
- 看代码，tensor转numpy:a = torch.ones(2,2)b = a.numpy()c=np.array(a) #也可以转nu
- 本文实例讲述了Java实现从数据库导出大量数据记录并保存到文件的方法。分享给大家供大家参考，具体如下：数据库脚本：-- Table &quo
数据结构树简介一、树简介树(Tree)是一种抽象的数据结构，是一个数据的集合，集合中的数据组成了一个树状结构。例如上图，看起来像一棵倒挂的树- 说实话，第一次写这么长的Python代码，期间遇到了很多问题，但是，最终还是完成了，花了我一天半的时间。该程序实现了用户的增，删，改，查，主
- 先看看：css中class与id的区别及应用表单的name与id其实是同一个意思，都是为了标记对象名称。它们所不同的是：name是Netsc
- print函数的功能是打印图窗或保存为特定文件格式。语法print(filename,formattype)print(filename,f
- 本文实例讲述了python获取从命令行输入数字的方法。分享给大家供大家参考。具体如下：#--------------------------
- <div> <a
- 连接：mysql -h主机地址 -u用户名 －p用户密码 （注:u与root可以不用加空格，其它也一样）断开：exit （回车）创建授权：g
- 场景描述今天在将 Hive 表同步到 MySQL 之后，其中有一列是唯一列，但是在 MySQL 中查询的时候 count 与 distinc
- 由于同事电脑上没有直接可以压缩gz.tar格式的压缩软件，而工作中这个又时常需要将zip文件转换为gz.tar格式，所以常常将压缩为zip格
- 本文实例为大家分享了opencv矿石图片检测矿石数量的具体代码，供大家参考，具体内容如下原始矿石图片此类图片是高躁图，二值化后图像如下采用膨
- 一、前言 前面我们学习了if分支判断和for循环语句，在这次推送中我们将继续了解循环大家庭的成员们。大家可以通过上面的流程图来了解
- 因为工作上要将客户的部分资料传给第三方做进一步处理，但是因为涉及到手机号等关键个人信息，所以需要对中间四位数做匿名化的简单处理。>&g
- 概要说明：自动更新程序主要负责从服务器中获取相应的更新文件，并且把这些文件下载到本地，替换现有的文件。达到修复Bug，更新功能的目的。本文作
- 1 元组同一元组中元素的数据类型可以不同元组中只包含一个元素时，需要在元素后面添加逗号，否则圆括号会被当做运算符使用元组的创建：赋值命令=或
- 好难受，上次发了做游戏的居然没人看，每天为了给你们写啥，老夫心都操碎了~真的是，今天来给大家爬一波短视频网站吧，都是些很养眼的~网站地址在代
- Group By分组后选取每组最新的一条数据问题group by语句只会展示一条数据，而且很多时候并不会展示我们想要的数据，如何解决呢首先我
- Golang 高并发问题的解决Golang在高并发问题上，由于协程的使用，相对于其他编程语言，已经有了很大的优势，即相同的配置上，Golan
