首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js Canvas实现圆形时钟教程

Posted in Javascript onSeptember 19, 2016

阅读本文需要一点关于canvas基本用法的基础，本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程

第一步：新建一个最简单的html文件，并且在<body>标签中定义元素canvas。

canvas.html

<html>
 <head>
 <title>Canvas clock tutorial</title>
 </head>
 <body>
 <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

 在这一步完成后，用浏览器打开canvas.html，你会发现什么都看不到，这是因为我们没有在canvas上绘制任何东西，同时也没有为其定义边界。

在canvas .html中为<canvas>添加css样式属性：

<html>
 <head>
 <title>Canvas clock tutorial</title>
 <style type="text/css">
  canvas { border: 1px solid black; }
 </style>
 </head>
 <body>
 <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

这样，我们就能看到<canvas>的轮廓。

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

注意: 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。 

第二步：新建实现绘制圆形时钟逻辑的draw.js文件，进行初始化工作。

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

在js语法中，可以利用Date()来实时获取时间。
 var currentTime = new Date();

随后，要掌握的是canvas绘制圆形的函数：
 arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法表示画一个以（x,y）为圆心的、以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认顺时针（true））来生成。
 其中stratAngle和endAngle的单位并不是我们所熟悉的角度单位，而是弧度单位。一个完整的圆跨弧度2π。 

在canvas的坐标系中，是以x轴正方向所在的方向为0弧度。时钟指针按顺时针方向转，以2π为一个周期，因此如下图所示，时钟指针，是从(-1/2)*π位置开始走的。 

js Canvas实现圆形时钟教程

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

//将一个时钟周期12等分，对12求余是因为Date().getHours将返回24小时制的小时。
hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12); 
//MINUTE 一圈60等分
minute = (currentTIme.getMinutes) * (2* Math.PI / 60); 
//SECOND 一圈60等分
second = (currentTime.getSeconds) * (2 * Math.PI / 60);

由于在canvas中时钟圆从(-1/2)*π开始走，因此我们还需要给它们加上(-1/2)*π的起始偏移量。

初步得到draw.js:

function draw() {
 //canvas绘画的前提工作
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 ctx.beginPath();
 ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
 ctx.moveTo(200,100);
 ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
 ctx.moveTo(200,50);
 ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
 ctx.stroke();
 }
}

同时在canvas.html中 加入draw.js的引用。 

<html>
 <head>
 <title>Canvas clock tutorial</title>
 <style type="text/css">
  canvas { border: 1px solid black; }
 </style>
 <script src="draw.js" type="text/javascript"></script>
 </head>
 <body onload="draw();">
 <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

在完成了第二步之后，我们可以看到一个当前时间的圆形时钟轮廓。那么接下来，就是让它动起来！ 

第三步：使用requestAnimationFrame()方法让时钟动起来。

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

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

根据一秒60帧的频率，那么second在1帧里面的增量是：2*π / 60 / 60 = π / 1800；

minute在一帧里面的增量是second增量的60分之一；hour在一帧里面的增量是minute的12分之1。

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

由此得到：requestAnimationFrame()函数中，hour，minute，second的更新过程如下： 

var s = Math.PI / 1800;
  var m = s / 60;
  var h = m / 12;
  second = second + s;
  minute = minute + m;
  hour = hour + h;
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  if(minute >= Math.PI * (3/2)){
  minute = Math.PI * (-1/2);
  }
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }</span>

 更新draw.js的完整代码如下：

function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 var s = Math.PI / 1800;
 var m = s / 60;
 var h = m / 12;
 var rotate = requestAnimationFrame(step);
 function step(){
  second = second + s;
  minute = minute + m;
  hour = hour + h;
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  if(minute >= Math.PI * (3/2)){
  minute = Math.PI * (-1/2);
  }
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  ctx.clearRect(0, 0, 400 , 400);
  ctx.beginPath();
  ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
  ctx.moveTo(200,100);
  ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
  ctx.moveTo(200,50);
  ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
  ctx.stroke();
  requestAnimationFrame(step);
 }
 }
}

到这步为止，我们已经得到了一个会动的圆形时钟，接下来，我们为其添加上指针。 

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

JS为我们提供了Math.cos() 、Math.sin() 计算指针到达的位置，它们所接收参数的单位也都是弧度。

function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 var s = Math.PI / 1800;
 var m = s / 60;
 var h = m / 12;
 var rotate = requestAnimationFrame(step);
 function step(){
  second = second + s;
  minute = minute + m;
  hour = hour + h;
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  if(minute >= Math.PI * (3/2)){
  minute = Math.PI * (-1/2);
  }
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  //秒针的终点
  xs = 150 * Math.cos(second) + 200;
  ys = 150 * Math.sin(second) + 200;
  //分针的终点
  xm = 100 * Math.cos(minute) + 200;
  ym = 100 * Math.sin(minute) + 200;
  //时针的终点
  xh = 50 * Math.cos(hour) + 200;
  yh = 50 * Math.sin(hour) + 200;

  ctx.clearRect(0, 0, 400 , 400);
  ctx.beginPath();
  //绘制指针
  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,Math.PI*(-1/2),hour,false);
  ctx.moveTo(200,100);
  ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
  ctx.moveTo(200,50);
  ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
  ctx.stroke();
  requestAnimationFrame(step);
 }
 }
}

嗯嗯，虽然指针是画出来了，都是我略感后悔，因为感觉太丑了。从审美学角度而言，带指针时钟就应该是个全圆轮廓的时钟。不知道读者有没有同感。我决定在第五步中把第四步回退了。 

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

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

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

function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 var s = Math.PI / 1800;
 var m = s / 60;
 var h = m / 12;
 var rotate = requestAnimationFrame(step);
 function step(){
  second = second + s;
  minute = minute + m;
  hour = hour + h;
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  if(minute >= Math.PI * (3/2)){
  minute = Math.PI * (-1/2);
  }
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }

  ctx.clearRect(0, 0, 400 , 400);
  ctx.beginPath();
  //绘制圆形轮廓
  drawCircle(ctx, 100, hour, '#99ff00');
  drawCircle(ctx, 120, minute, '#99ff66');
  drawCircle(ctx, 140, second, '#66cc66');
  requestAnimationFrame(step);
 }
 }
}

function drawCircle(ctx, radius ,endAngle, color){
 ctx.beginPath();
 ctx.moveTo(200,200-radius);
 ctx.strokeStyle = color;
 ctx.lineWidth = 20;
 ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
 ctx.stroke();
}

第六步（后续添加）：为时钟添加数字指数。

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

修改后的canvas.html

<html>
 <head>
 <title>Canvas clock tutorial</title>
 <style type="text/css">
  canvas { border: 1px solid black; }
  #display {position: absolute; top:8; left:8;}
 </style>
 <script src="draw.js" type="text/javascript"></script>
 </head>
 <body onload="draw();">
 <canvas id="clock" width="400" height="400"></canvas>
 <canvas id="display" width="400" height="400"></canvas>
 </body>
</html>

修改后的draw.js

function draw() {
 var canvas = document.getElementById('clock');
 var displayCanvas = document.getElementById('display');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 var ctxD = displayCanvas.getContext('2d');
 showDisplay(ctxD, currentTime);
 var s = Math.PI / 1800;
 var m = s / 60;
 var h = m / 12;
 var rotate = requestAnimationFrame(step);
 function step(){
  second = second + s;
  minute = minute + m;
  hour = hour + h;
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }
  if(minute >= Math.PI * (3/2)){
  minute = Math.PI * (-1/2);
  }
  if(second >= Math.PI * (3/2)){
  second = Math.PI * (-1/2);
  }

  ctx.clearRect(0, 0, 400 , 400);
  ctx.beginPath();
  //绘制圆形轮廓
  drawCircle(ctx, 100, hour, '#99ff00');
  drawCircle(ctx, 120, minute, '#99ff66');
  drawCircle(ctx, 140, second, '#66cc66');
  requestAnimationFrame(step);
 }
 }
}

function drawCircle(ctx, radius ,endAngle, color){
 ctx.beginPath();
 ctx.moveTo(200,200-radius);
 ctx.strokeStyle = color;
 ctx.lineWidth = 20;
 ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
 ctx.stroke();
}

function showDisplay(ctx, date){
 var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
 //计时文字样式
 ctx.font = "13px Sans-Serif";
 ctx.textAlign = "center";
 ctx.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);
}

最终成果图如下：

js Canvas实现圆形时钟教程

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

js Canvas实现圆形时钟教程

- Author -

jakioneplus

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
React优化子组件render的使用
May 12 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
Sep 19 #Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
信号同步(1) PIL(1) reduce()(1) 鲲鹏(1) 裁剪图片(1) 生命周期(1) GCN(1) Flask(2) 进度条(1) Python(3)
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
到处都是jQuery选择器的年代 不了解它们的性能，行吗
2012/06/18 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python连接oracle数据库实例
2014/10/17 Python
python中map()函数的使用方法示例
2017/09/29 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
一道Delphi上机题
2012/06/04 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
代理人委托书
2014/08/01 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
golang 实现两个结构体复制字段
2021/04/28 Golang
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL