js Canvas实现圆形时钟教程
更新时间：2016年10月3日 10:00 点击：2063
阅读本文需要一点关于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)*π位置开始走的。
当前时间的弧度计算方式如下：
//将一个时钟周期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);
}
最终成果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
上一篇: React实现双向绑定示例代码
下一篇: vue从使用到源码实现教程详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15