canvas实现动态时钟

2017-07-29

Canvas实现的动态时钟

实验室杨老大给的假期任务，不管用什么方式实现一个动态的时钟。
因为我是弄web的来着，思前想后比较容易的实现方式就canvas或者css3了，所以就决定用canvas画个时钟出来。

canvas

Canvas 对象表示一个 HTML 画布元素 canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作,用自带的api进行画图操作。
首先我们在body里面定义一个canvas对象

1
2
3

<canvas id="canvas" style="border:1px solid black;margin:50px auto;display:block" >
    		当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

运用canvas画图

构建环境

<script type="text/javascript">
  var canvas = document.getElementById("canvas");//找到画布对象
  canvas.width = 800;  //画布的长
  canvas.height = 800;  //画布的宽
  var ctx = canvas.getContext("2d");  //构建2d环境
  
</script>

弄好环境之后就可以进行画图了

定义一个画图的函数

function drawClock(){
  ctx.clearRect(0,0,500,500);先清空片矩形区域
  var now = new Date();//获取系统时间
  var second =now.getSeconds();  
  var minute =now.getMinutes();  
  var hour1 =now.getHours();  
  //获取时分秒
  var hour=hour1+minute/60;  
  hour=hour>12 ?hour-12:hour;  //将24小时转换成12小时

然后继续在这个函数里面画一个圆,用来当做表盘

ctx.beginPath(); //开始画图
ctx.lineWidth=8;     //线的宽度  
ctx.strokeStyle="black";  //线的颜色
ctx.arc(400,400,200,0,360,false); //画一个圆在（400,400）的位置上，半径为200px

ctx.stroke();   //填充线圈
ctx.closePath();   //结束这一阶段的操作

效果图

之后就是画表盘上的刻度分别是小时和分钟

for(var i = 0;i<12;i++){
 	ctx.save();  //保存当前状态  
     ctx.lineWidth=5;   //刻度粗细  
     ctx.strokeStyle="black" ; //刻度颜色  
     ctx.translate(250,250);  //设置00点,以画布中心为00  
     ctx.rotate(i*30*Math.PI/180);  //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
     ctx.beginPath();  
     ctx.moveTo(0,-170);   //刻度起始点  
     ctx.lineTo(0,-195);    //刻度结束点  
     ctx.closePath();  
     ctx.stroke();  
     ctx.restore();   //将旋转后的图片返回原画布  
 }
 for(var i=0;i<60;i++){  
     ctx.save();          //保存当前状态  
     ctx.lineWidth=3;   //刻度粗细  
     ctx.strokeStyle="black"    //刻度颜色  
     ctx.translate(250,250);   //设置00点,以画布中心为00  
     ctx.rotate(i*6*Math.PI/180);    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
     ctx.beginPath();  
     ctx.moveTo(0,-186);    //起始点  
     ctx.lineTo(0,-195);    //终点
     ctx.closePath();  
     ctx.stroke();  
     ctx.restore();    //将旋转后的图片返回原画布  
 }

效果图

画完之后我们就可以画时针，分针，秒针了.

    //表盘中兴的点
    ctx.beginPath();  
    ctx.lineWidth=1;  
    ctx.strokeStyle="black";  
    ctx.fillStyle="blue";
    //路径函数 x,y,r,角度范围,顺时针/逆时针
    ctx.arc(250,250,8,0,360,false);  
    ctx.fill();  
    ctx.stroke();   
    ctx.closePath();    
//时针  
     ctx.save(); //保存当前状态   
     ctx.lineWidth=6;  
     ctx.strokeStyle="black";  
     //设置异次元空间00点  
     ctx.translate(250,250);  
     ctx.rotate(hour*30*Math.PI/180);  //设置旋转角度 参数是弧度，角度 0--360  弧度角度*Math.PI/180  
     ctx.beginPath();       
     ctx.moveTo(0,-120);  //起始
     ctx.lineTo(0,10);    //终点
     ctx.closePath();  
     ctx.stroke();  
     ctx.restore();  
//分针  
     ctx.save();  
     ctx.lineWidth=4;  
     ctx.strokeStyle="green";  
     ctx.translate(250,250);  
     ctx.rotate(minute*6*Math.PI/180);  
     ctx.beginPath();       
     ctx.moveTo(0,-150);  
     ctx.lineTo(0,15);  
     ctx.closePath();  
     ctx.stroke();  
     ctx.restore();  
//秒针
     ctx.save();  
     ctx.lineWidth="1.5";  
     ctx.strokeStyle="red";  
     ctx.translate(250,250);  
     ctx.rotate(second*6*Math.PI/180);  
     ctx.beginPath();       
     ctx.moveTo(0,-160);  
     ctx.lineTo(0,20);  
     ctx.closePath();  
     ctx.stroke();  
     //秒针前端小点  
     ctx.beginPath();  
     //外环为红色  
     ctx.strokeStyle="red";  
     //灰色填充  
     ctx.fillStyle="black";  
     ctx.arc(0,-80,4,0,360,false);  
     ctx.fill();  
     ctx.closePath();  
     ctx.stroke();  
     ctx.restore(); 
}

通过系统时间的数值来判断直线的偏转度来构成时针，分针和秒针的偏转。

效果图

之后只要不断的动态刷新drawClock()这个函数，就可以动态的显示时间了

1 2	drawClock(); //调用函数 setInterval(drawClock,1000); //定时器，没1000毫秒刷新一次函数

至此我们的动态时钟就完成了

附上一个效果的地址

传送门

总结

在web端，做一个动态的时钟还是不怎么难的，运用canvas之后只要熟记语法规则，基本都可以做出来的
有几个常用的canvas api的总结
beginPath()开始绘制常常与closePath()一起用，用于开始和结束的标志
lineWidth：线的宽度
strokeStyle()线的颜色
arc(x,y,r,0,cot,方向)绘制曲线
save()保存上个的绘图环境
translate()设置旋转角度，参数是弧度
fill()填充颜色
restore()旋转后返回画布
绘制一条线的moveTo()起点和 lineTo()终点
大概一些常用的就这么多了吧