您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
使用canvas制作漂亮的动态时钟
发布时间：2015-05-21 07:33:40编辑：雪饮阅读（）
为了前端，为了用户体验，一起努力
雪饮个人博客这篇文章主要介绍了使用canvas绘制超炫时钟的方法及代码，非常的漂亮，这里推荐给大家 。
源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪饮个人博客-canvas实例1-时钟</title>
<style type="text/css">
canvas{
/*background:url(1.jpg.png) no-repeat;*/
/*background:url(1.jpg.png) no-repeat;*/
border:1px solid green;
background:url(2.jpg);
background-size:500px 500px;
background-repeat:no-repeat;
border-radius:250px;}
</style>
</head>
<body>
<canvas id="clock" width="500" height="500">
雪饮个人博客提醒你，你的浏览器不支持canvas标签
</canvas>
<script type="text/javascript">
var clock=document.getElementById("clock");
var cxt=clock.getContext("2d");//设置2d绘图环境
function drawClock(){
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min1=now.getMinutes();
var hour=now.getHours();
//格式问题：表盘上面是12小时的时间格式，如获取到时间为19：23：30该如何？
//24小时进制转换为12小时
hour=hour>12?hour-12:hour;
//浮点类型的小时数
hour=hour+(min1/60);
//画表盘
cxt.beginPath();
cxt.lineWidth=10;
cxt.strokeStyle="pink";
cxt.arc(250,250,200,0,360,false);
//以250,250为圆心,200为半径,从0到360画圆，画圆顺序是false
cxt.closePath();
cxt.stroke();//开始画圆
//画刻度
//时刻度
for(var i=0;i<12;i++){
//仔细观察刻度盘会发现，每两个相邻时间(时)相距角度为30度，360/30=12
cxt.save();//先保存之前环境
cxt.lineWidth=7;//设置时针粗细
cxt.strokeStyle="#000";
cxt.translate(250,250);//异次元空间重置0,0点
cxt.rotate(i*30*Math.PI/180);//弧度=角度*Math.PI/180
//异次元空间每次旋转30度对应的弧度，刚好12次后就是360度对应的弧度
//相当于进入异次元空间共计12次，每次进来的环境都比之前旋转了30度
//而所要画的线段位置仍然不变，这就是创建成时刻针的方法
cxt.beginPath();
cxt.moveTo(0,-165);//起点（内环）
//现在的圆心在之前的250,250处，而我们以12点(0点)的位置开始（位于圆心正上方），所以其纵坐标为-180
cxt.lineTo(0,-195);//终点(外环)
cxt.closePath();
cxt.stroke();
cxt.restore();//重新塞回去
}
//分刻度
for(var i=0;i<60;i++){
//仔细观察刻度盘会发现，每两个相邻时间(分)相距角度为6度，360/6=60
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="blue";
//两个异次元空间不冲突，所以这里如果没有设置颜色将会默认继承真实空间的颜色
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);//弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);//弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(min1*6*Math.PI/180);//弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth=3;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);//弧度=角度*Math.PI/180
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
//画出秒针的与底层分针和时针的交叉
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
cxt.fillStyle="#fff";
cxt.strokeStyle="green";
cxt.fill();
cxt.stroke();
//秒针最前端
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
cxt.fillStyle="#fff";
cxt.strokeStyle="green";
cxt.fill();
cxt.stroke();
cxt.restore();
}
drawClock();
//为了防止下面setInterval方法的间隔1s时间的空白，先初始化一个时钟
setInterval(drawClock,1000);
</script>
</body>
</html>
雪饮个人博客-canvas实例1-时钟案例下载：canvas实例1-时钟.rar
关键字词：canvas,时钟,个人博客
上一篇：html5中智能表单的使用
下一篇：图片的dataurl数据的使用