Canvas实现的动态时钟
实验室杨老大给的假期任务，不管用什么方式实现一个动态的时钟。
因为我是弄web的来着，思前想后比较容易的实现方式就canvas或者css3了，所以就决定用canvas画个时钟出来。
canvas
Canvas 对象表示一个 HTML 画布元素 canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作,用自带的api进行画图操作。
首先我们在body里面定义一个canvas对象
<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()这个函数，就可以动态的显示时间了
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()终点
大概一些常用的就这么多了吧
网友评论