canvas简单实现动态时钟

2024-12-15 技术教程

使用到的知识：

1. 获取系统时间

2. 画图形，空心图形，实心图形，以及一些属性

3. for循环

准备工作：添加一块画布1000*1000（随意），引用canvas.js

<!doctypehtml><html><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content="华慕熊"><metaname="Keywords"content=""><metaname="Description"content=""><title>动态时钟</title><scriptsrc="canvas.js"></script><style>body,h2,h3,h4,h5,h6,h7,*{margin:0px;}</style></head><body><canvasid="myCanvas"width="1000"height="1000"></canvas></body></html>

canvas.js

window.onload=function(){//html5加载完成后才加载这个文件varmyCanv=document.getElementById("myCanvas");//通过id获取到canvas画布（演员）varoCanv=myCanv.getContext("2d");//2d环境（舞台）}

开始画图：canvas.js

静态效果

图中有圆，刻度线，时分秒针，点数。另外的是系统时间。

我们在圆心为（200,200）的位置画一个半径为150的圆

oCanv.beginPath();//起始一条路径，或重置当前路径oCanv.arc(200,200,150,0,360*Math.PI/180,false);//这里是弧度oCanv.stroke();//画

解释：arc(x,y,r,sAangle,eAangle,conterclockwise);

此时的效果图：

下边画分针刻度线：

此时我们需要思考并要明白的几件事：

刻度线怎么画出来的？

画圆的起始点在哪？

应该在哪？

解决思考的问题：

先看一段代码与效果：

oCanv.beginPath();oCanv.moveTo(200,200);oCanv.arc(200,200,150,0,6*Math.PI/180,false);oCanv.closePath();oCanv.stroke();

这段代码是从0度顺时针画了一个6度的扇形

一、画分针刻度线

一周有60个刻度线，此时可以说是两个刻度线画出来了，只要使用一下循环即可了：

oCanv.beginPath();for(vari=0;i<60;i++){oCanv.moveTo(200,200);oCanv.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);}oCanv.closePath();oCanv.stroke();

此时的效果图是：

其实这里我们应该能想到该怎么做了吧？

画一个比这个稍微小点的白色实心圆即可（圆心要一致）！

oCanv.beginPath();oCanv.fillStyle="#fff";oCanv.arc(200,200,150*19/20,0,360*Math.PI/180,false);oCanv.fill();oCanv.stroke();

此时的效果：

好像差不多，只是我们不想要内圆的边，其实写到fill()就可以了，既然写到那就可以了，我为什么还要写呢？我只是在乎你疑惑我为什么不写呢。

为了实现我们想要的效果，去掉stroke()即可。图不粘了。

二、画时针刻度线

方法类似画分针刻度线，不同的是时针应该有12条线，之间是30度，线条比较粗

oCanv.beginPath();oCanv.lineWidth=3;//线条的粗细，默认是1,3就加粗了for(vari=0;i<12;i++){oCanv.moveTo(200,200);oCanv.arc(200,200,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);}oCanv.closePath();oCanv.stroke();//画实心圆oCanv.beginPath();oCanv.fillStyle="#fff";oCanv.arc(200,200,150*18/20,0,360*Math.PI/180,false);oCanv.fill();

效果图：

三、获取系统的时间（电脑时间）

Date()对象

Hours()方法/时

Minutes()方法/分

Seconds()方法/秒

varoDate=newDate();varoHours=oDate.getHours();varoMin=oDate.getMinutes();varoSec=oDate.getSeconds();document.write(oHours+"时"+oMin+"分"+oSec+"秒");

打印一下时间：

我们要知道，虽然说时间是一秒一秒走的，但在这里可就不是这么说的了，应该说是多少弧度的走，所以把时间用弧度算出来，那么问题来了，我们时钟的0在12的位置，而我们现在0的位置在钟表的3的位置，那么0-3之间的角度是90度，即90*π/180

如果我们只画一个圆，那么起点是钟表的3的位置，但我们的画钟表的0点0时0分都是在12的位置，那么怎么才能使其都为钟表上0的位置呢？

先看代码：

varoHoursValues=(-90+oHours*30)*Math.PI/180;varoMinValues=(-90+oMin*6)*Math.PI/180;varoSecValues=(-90+oSec*6)*Math.PI/180;

首先-90使起点到钟表上12的位置，+oHours*30是现在时刻的度数，比如现在是晚上21:30，oHours=21，21x30°=630°（=9x30=270°），应该在钟表的9的位置，我们可以看看：

//画时针oCanv.beginPath();oCanv.lineWidth=5;oCanv.moveTo(200,200);oCanv.arc(200,200,150*8/20,oHoursValues,oHoursValues,false);//用画圆的方法画的时针，让起点与终点一个位置即可，感兴趣的试试画直线oCanv.closePath();oCanv.fill();oCanv.stroke();

分针与秒针类似时针。

现在我们让它动起来：

新知识：setInterval()方法，间隔多长时间刷新页面，我们需要1秒，它的单位是毫秒，那么就是1000毫秒

在这之前可以先清除一下画布：clearRect(0, 0, 200, 200);//清空画布

最后我们加上小时数（点数）

vardeg=2*Math.PI/12;//弧度=角度*Math.PI/180;ogc.save();ogc.beginPath();ogc.translate(200,200);for(vari=1;i<13;i++){varx1=Math.sin(i*deg);//正弦vary1=-Math.cos(i*deg);//余弦ogc.fillStyle="black";//字体颜色ogc.font="noraml30pxCalibri";//字体ogc.textAlign='center';ogc.textBaseline='middle';ogc.fillText(i,x1*125,y1*125);//填充125这个值越大越显示在圆外面}ogc.closePath();ogc.restore();

此时就是最开始的图片的样子了。

修改后的完整的代码：canvas.js

但由于里边的圆心，半径，点数都是固定好的，如果要修改圆心位置、半径大小会比较麻烦，我们可以封装一下，下边是我之前写的一个封装好的代码：

有什么错误或写的不好的地方，还请不吝赐教，谢谢！