js Canvas实现循环时钟教程

阅读这篇文章需要对画布的基本用法有一点基础。这个例子分享了用HTML5 Canvas实现循环时钟的简单教程

第一步：创建最简单的html文件，并在主体标签中定义元素画布。

canvas.html

Html head title canvas clock教程/title/head body canvas id=' clock ' width=' 400 ' height=' 400 '/canvas/body/html这一步完成后，用浏览器打开canvas.html，你会发现你什么都看不到，因为我们没有在canvas上画任何东西，也没有为它定义边界。

在画布中为画布添加css样式属性。html:

html head titleCanvas时钟教程/title style type=' text/CSS ' canvas { border : 1px纯黑；}/style/head body canvas id=' clock ' width=' 400 ' height=' 400 '/canvas/body/html这样我们就可以看到canvas的轮廓。

未设置宽度和高度时，画布将宽度初始化为300像素，高度初始化为150像素。这个元素可以用CSS定义它的大小，但是在绘制时，图像会缩放以适合它的帧大小：如果CSS的大小与原始画布的比例不一致，就会失真。

注意：如果您绘制的图像失真，请尝试在画布属性中明确指定宽度和高度，而不是使用CSS。

第二步：创建一个新的draw.js文件，实现昼夜绘图的逻辑，并初始化。

毫无疑问，要实现时钟，需要获取系统时间。

在js语法中，可以使用Date()实时获取时间。var currentTime=新日期()；

然后，我们要掌握画布画圆的功能：圆弧(x，y，半径，起始角，endAngle，逆时针)。这种方法是指以半径为(x，y)的中心，从起始角到结束角，按照逆时针给定的方向画一个圆弧(圆)(默认为顺时针(真))stratAngle和end angle的单位不是大家熟悉的角度单位，而是弧度单位。完整的圆跨度为2弧度。

在画布的坐标系中，x轴的正方向为0弧度。时针顺时针转动，周期为2，因此如下图所示，时针从(-1/2)*的位置开始。

当前时间的弧度计算如下：

//将一个时钟周期分成12个相等的部分。12的其余部分的原因是日期()。getHours将返回24小时。hour=(current time . gethours()% 12)*(2 * Math。PI/12)；//MINUTE在一个圆中有60个相等的部分。分钟=(currenttime。getminutes) * (2 *数学。pi/60)；//一个圆中的第二个60等份。second=(currenttime。getseconds) * (2 *数学。pi/60)；由于时钟圆在画布中是从(-1/2)*开始的，所以我们需要给它们加上(-1/2)*的起始偏移量。

初步得到draw.js:

函数draw() {//canvas painting先决条件work var canvas=document . getelementbyid(' clock ')；var currentTime=新日期()；var hour=(currenttime.gethours())* Math.PI/6; var minute=current time . getminutes()* Math.PI/30; var second=current time . getseconds()* Math.PI/30; hour=hour-math。PI *(1/2)；分钟=分钟-数学。PI *(1/2)；秒=秒-数学。PI *(1/2)；if(canvas . getcontext){ var CTX=canvas . getcontext(' 2d ')；CTX . BeginPath()；ctx.arc(200，200，50，数学。PI *(1/2)，小时，假)；ctx.moveTo(200，100)；ctx.arc(200，200，100，Math。PI *(1/2)，分钟，假)；ctx.moveTo(200，50)；ctx.arc(200，200，150，数学。PI *(1/2)，第二，假)；CTX . stroke()；}}同时，将draw.js的引用添加到canvas.html。

html head titleCanvas时钟教程/title style type=' text/CSS ' canvas { border : 1px纯黑；}/style script src=' http : draw . js ' type=' text/JavaScript '/script/head body on load=' draw()；'canvas id=' clock ' width=' 400 ' height=' 400 '/canvas/body/html第二步之后，我们可以看到当前时间的圆形时钟轮廓。那下一步就是让它动起来！

第三步：使用requestAnimationFrame()方法使时钟移动。

requestAnimationFrame()的执行频率是一秒60帧，用户可以在requestAnimationFrame定义事件，使其在每一帧中重复、迭代完成相应的事件。

在我们这个案例中，每一帧里面requestAnimationFrame要做的事情很简单，为当前时间的三个参数（时针、分针、秒针)添加增量，然后重新绘制时钟。

根据一秒60帧的频率，那么第二在一帧里面的增量是：2*/60/60=/1800;

分钟在一帧里面的增量是第二增量的60分之一；小时在一帧里面的增量是分钟的12分之1。

另外：当小时、分钟、秒任一一个变量到达3/2*后，意味着完成了一个周期，就要重新初始化为(-1/2)*,否则会覆盖绘制成一个圆。

由此得到：requestAnimationFrame()函数中时、分、秒的更新过程如下：

var s=数学/1800；var m=s/60；var h=m/12；秒=秒s；分钟=分钟m；小时=小时h；如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}如果(分钟=数学*(3/2)){ 0分钟=数学. PI *(1/2)；}如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}/span更新draw.js的完整代码如下：

函数draw(){ var canvas=document。getelementbyid(' clock ')；var currentTime=新日期();var小时=(currenttime.gethours())* Math.PI/6; var分钟=当前时间。getminutes()* Math.PI/30; var second=当前时间。getseconds()* Math.PI/30;小时=小时数学.PI *(1/2)；分钟=分钟-数学. PI *(1/2)；秒=秒-数学. PI *(1/2)；if(画布。CTX=画布。get context(' 2d ')；var s=数学/1800；var m=s/60；var h=m/12；var rotate=requestAnimationFrame(步骤);函数step(){ second=秒s；分钟=分钟m；小时=小时h；如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}如果(分钟=数学*(3/2)){ 0分钟=数学. PI *(1/2)；}如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；} ctx.clearRect(0，0，400，400)；CTX。begin path()；ctx.arc(200，200，50，数学*(1/2)，小时，假);ctx.moveTo(200，100)；(200，200，100，数学.PI *(1/2)，分钟，假);ctx.moveTo(200，50)；ctx.arc(200，200，150，数学*(1/2)，第二，假);CTX。笔画()；requestAnimationFrame(步骤);} }}到这步为止，我们已经得到了一个会动的圆形时钟，接下来，我们为其添加上指针。

第四步*:添加时针、分针、秒针。

射流研究…为我们提供了数学。cos()，数学。sin()计算指针到达的位置，它们所接收参数的单位也都是弧度。

函数draw(){ var canvas=document。getelementbyid(' clock ')；var currentTime=新日期();var小时=(currenttime.gethours())* Math.PI/6; var分钟=当前时间。getminutes()* Math.PI/30; var second=当前时间。getseconds()* Math.PI/30;小时=小时数学.PI *(1/2)；分钟=分钟-数学. PI *(1/2)；秒=秒-数学. PI *(1/2)；if(画布。CTX=画布。get context(' 2d ')；var s=数学/1800；var m=s/60；var h=m/12；var rotate=requestAnimationFrame(步骤);函数step(){ second=秒s；分钟=分钟m；小时=小时h；如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}如果(分钟=数学*(3/2)){ 0分钟=数学. PI *(1/2)；}如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；} //秒针的终点xs=150 * Math.cos(秒)200;ys=150 * Math.sin(秒)200;//分针的终点xm=100 * Math.cos(分钟)200;ym=100 * Math.sin(分钟)200;//时针的终点xh=50 * Math.cos(小时)200;yh=50 *数学. sin(小时)200;ctx.clearRect(0，0，400，400)；CTX。begin path()；//绘制指针ctx.moveTo(200，200)；ctx.lineTo(xs，ys)；ctx.moveTo(200，200)；ctx.lineTo(xm，ym)；ctx.moveTo(200，200)；ctx.lineTo(xh，yh)；//绘制圆形轮廓ctx.moveTo(200，150)；ctx.arc(200，200，50，数学*(1/2)，小时，假);ctx.moveTo(200，100)；(200，200，100，数学.PI *(1/2)，分钟，假);ctx.moveTo(200，50)；ctx.arc(200，200，150，数学*(1/2)，第二，假);CTX。笔画()；requestAnimationFrame(步骤);} }}嗯嗯，虽然指针是画出来了，都是我略感后悔，因为感觉太丑了。从审美学角度而言，带指针时钟就应该是个全圆轮廓的时钟。不知道读者有没有同感。我决定在第五步中把第四步回退了。

第五步：个性化、美化、自定义你的时钟。

html5的帆布画布，提供了多种样式属性，如线条颜色、线条粗细等等。

为了提高代码的可重用性，我们将画圆的代码抽象成一个函数。

函数draw(){ var canvas=document。getelementbyid(' clock ')；var currentTime=新日期();var小时=(currenttime.gethours())* Math.PI/6; var分钟=当前时间。getminutes()* Math.PI/30; var second=当前时间。getseconds()* Math.PI/30;小时=小时数学.PI *(1/2)；分钟=分钟-数学. PI *(1/2)；秒=秒-数学. PI *(1/2)；if(画布。CTX=画布。get context(' 2d ')；var s=数学/1800；var m=s/60；var h=m/12；var rotate=requestAnimationFrame(步骤);函数step(){ second=秒s；分钟=分钟m；小时=小时h；如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}如果(分钟=数学*(3/2)){ 0分钟=数学. PI *(1/2)；}如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；} ctx.clearRect(0，0，400，400)；CTX。begin path()；//绘制圆形轮廓drawCircle(ctx，100，小时，' # 99 ff 00 ')；drawCircle(ctx，120，分钟，' # 99ff 66 ')；drawCircle(ctx，140，秒，' # 66 cc 66 ')；requestAnimationFrame(步骤);} } }函数drawCircle(ctx，半径，endAngle，颜色){ CTX。begin path()；ctx.moveTo(200，200半径);CTX . strokestyle=colorctx . line width=20(200，200，半径，数学. PI *(1/2)，endAngle，false)；CTX。笔画()；} 第六步（后续添加):为时钟添加数字指数。

具体做法为多增加一个画布帆布元素。既然我们已经能从日期()中获取时间，那么显示数值的来源不成问题。读者唯一需要知道的就是利用setInterval(thingstodo()，Interval)方法来实现每秒更新一次指数。

修改后的canvas.html

html标题画布时钟教程/title style type=' text/CSS '画布{边框： 1px纯黑；} #显示{位置：绝对值；top:8left:8}/style脚本src=' http : draw。js ' type=' text/JavaScript '/script/head body on load=' draw()；'canvas id=' clock ' width=' 400 ' height=' 400 '/canvas canvas id=' display ' width=' 400 ' height=' 400 '/canvas/body/html修改后的draw.js

函数draw(){ var canvas=document。getelementbyid(' clock ')；var displayCanvas=文档。getelementbyid(' display ')；var currentTime=新日期();var小时=(currenttime.gethours())* Math.PI/6; var分钟=当前时间。getminutes()* Math.PI/30; var second=当前时间。getseconds()* Math.PI/30;小时=小时数学.PI *(1/2)；分钟=分钟-数学. PI *(1/2)；秒=秒-数学. PI *(1/2)；if(画布。CTX=画布。get context(' 2d ')；var ctxD=displaycanvas。get context(' 2d ')；showDisplay(ctxD，Currettime)；var s=数学/1800；var m=s/60；var h=m/12；var rotate=requestAnimationFrame(步骤);函数step(){ second=秒s；分钟=分钟m；小时=小时h；如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；}如果(分钟=数学*(3/2)){ 0分钟=数学. PI *(1/2)；}如果(秒=数学*(3/2)){ 0秒=数学. PI *(1/2)；} ctx.clearRect(0，0，400，400)；CTX。begin path()；//绘制圆形轮廓drawCircle(ctx，100，小时，' # 99 ff 00 ')；drawCircle(ctx，120，分钟，' # 99ff 66 ')；drawCircle(ctx，140，秒，' # 66 cc 66 ')；requestAnimationFrame(步骤);} } }函数drawCircle(ctx，半径，endAngle，颜色){ CTX。begin path()；ctx.moveTo(200，200半径);CTX . strokestyle=colorctx . line width=20(200，200，半径，数学. PI *(1/2)，endAngle，false)；CTX。笔画()；}函数showDisplay(ctx，date){ var h=date.getHours()，m=date.getMinutes()，s=date。getseconds()；//计时文字样式CTX。font=' 13px Sans-Serif '；ctx.textAlign=' centerCTX。stroketext(h ' : ' m ' :s，200，200)；var timmer=SetInterval(function(){ s；if(s=60){ m；s=0；} if(m=60){ h；m=0；} if(h=24){ h=0；} ctx.clearRect(0，0，400，400)；CTX。stroketext(h ' : ' m ' :s，200，200)；},1000);}最终成果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。