canvas绘制精细走动时钟

这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图：

颜色单配的比较难看，读者谅解。请看代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 0 auto;margin-top: 100px;/*border: 1px solid black;*/}</style></head><body><div class="box"><canvas id="canvas" width="300px" height="300px"></canvas></div><script type="text/javascript">var canvas = document.getElementById("canvas");var ctx = canvas.getContext('2d');run();setInterval(run,1000);function run(){var time = new Date();//获取现在时间var sec = time.getSeconds();//获取秒var min = time.getMinutes();//获取分钟var hour = time.getHours();//获取小时hour = hour>12 ? hour-12 : hour;ctx.clearRect(0,0,300,300);ctx.save();ctx.beginPath();ctx.lineWidth = 3;ctx.arc(150,150,130,0,2*Math.PI);var color = ctx.createRadialGradient(150,150,30,150,150,100);color.addColorStop(0.0,"rgb(48, 209, 219)");color.addColorStop(1.0,"rgb(30, 231, 116)");ctx.fillStyle = color;ctx.fill();ctx.strokeStyle = "aqua";ctx.stroke();ctx.restore();ctx.save();ctx.translate(150,150);for(var i=0; i<60; i++){if(i%5 == 0){ctx.beginPath();ctx.moveTo(0,120);ctx.lineTo(0,130);ctx.lineWidth = 5;ctx.strokeStyle = "blue";ctx.stroke();ctx.rotate(Math.PI/30);}else{ctx.beginPath();ctx.moveTo(0,120);ctx.lineTo(0,126);ctx.lineWidth = 1;ctx.strokeStyle = "cornflowerblue";ctx.stroke();ctx.rotate(Math.PI/30);}}ctx.restore();//秒针ctx.save();ctx.translate(150,150);ctx.rotate(sec*Math.PI/30);ctx.beginPath();ctx.moveTo(0,30);ctx.lineTo(0,-120);ctx.lineWidth = 1;ctx.strokeStyle = "red";ctx.stroke();ctx.restore();//分针ctx.save();ctx.translate(150,150);ctx.rotate(sec*Math.PI/1800 + min*Math.PI/30);//每一秒再分60分，秒针走一刻度，分针要走1/60刻度,sec*(6*Math.PI/180)/60ctx.beginPath();ctx.moveTo(0,20);ctx.lineTo(0,-100);ctx.lineWidth = 2;ctx.strokeStyle = "yellow";ctx.stroke();ctx.restore();//时针ctx.save();ctx.translate(150,150);ctx.rotate(min*Math.PI/360 + hour*Math.PI/6);//每一小时走过5个刻度线,60分钟,30deg，分成60份,30deg/60ctx.beginPath();ctx.moveTo(0,10);ctx.lineTo(0,-80);ctx.lineWidth = 3;ctx.strokeStyle = "black";ctx.stroke();ctx.restore();}</script></body>
</html>

这里笔者画了一个300*300的画布，在将画布进行旋转的时候，画布会沿着左上角进行转动，所以，笔者在这里将画布移动到想要显示的中心点位置，让图案进行旋转，转出刻度，这里需要用到save()和restore()，确保画布不会发生变动。
秒针走过1秒走了6deg，即6*Math.PI/180。要想实现分针走动，而不是跳动，就需要计算分针在一刻度内走的度数，一刻度走了60秒，所以讲一刻度分了60分，表示1秒钟分针走的度数，即(6*Math.PI/180)/60，再加上分针走的度数就可以让分针准确走动。再来看时针，时针一小时走了5个刻度，30deg,60分钟，所以30deg/60就是时针在一分钟内走的度数,也就是将1小时的角度划分了60份，即Math.PI/360.读者可能会有疑问，问什么不用秒去计算，即Math.PI/21600，将1小时的角度划分了3600份，这是因为用秒计算得到结果太小，是0.00…的小数，偏差较大，无法让时针较准确走动，读者可以自己尝试。理解这些基本原理，读者可以自己设计一个比较精美的钟表，不要像笔者这样看上去不忍直视。

canvas绘制精细走动时钟相关推荐

android 用canvas 绘制简单圆形时钟
写笔记写写不过人家 http://blog.csdn.net/u010575173/article/details/52701936 1,Android - Paint基础在自定义控件时,经常需要使 ...
h5 canvas绘制电子数字时钟
使用h5的canvas实现绘制电子数字时钟,只支持数字,效果如下: <!DOCTYPE html> <html lang="en"> <head> ...
【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
使用canvas绘制动画时钟
一代码 <!DOCTYPE html > <head> <meta charset="UTF-8" ><title>绘制动态时钟&l ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
canvas绘制时钟刻度表
canvas绘制时钟刻度表 1.首先看一下效果图 2.基本知识点 canvas.drawText:绘制文字,注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段,指定起始 ...

canvas绘制精细走动时钟

canvas绘制精细走动时钟相关推荐

最新文章

热门文章