注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

利用Canvas实现简单的时钟  

2014-06-16 20:24:50|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
实现的效果如下:
利用Canvas实现简单的时钟 - 梦幻雪冰 - 梦幻雪冰

 源代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
canvas {
width: 600px;
height: 600px;
margin: 50px 300px;
/*background:#ffc;*/
}
</style>
</head>
<body>
<canvas id='can' width=600 height=600></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById('can'),
context = can.getContext('2d'),
timer = null; // 存放计时器
// 对画布进行移动,让原点在画布中间
context.translate(can.width / 2, can.height / 2);
function draw() {
// 清画布,防止重叠在一起
context.clearRect(-300, -300, 600, 600);

// 画时钟圆盘
context.beginPath();
context.arc(0, 0, 151 , 0, Math.PI*2, true);
context.stroke();
context.closePath();

// 画刻度
for (var i = 0; i < 60; i++) {
context.beginPath();
context.lineCap = 'round';
// 能被5整除的样式不同
if (i % 5 == 0) {
context.lineWidth = 5;
context.strokeStyle = 'green'
context.moveTo(0, -120);
} else {
context.lineWidth = 2;
context.strokeStyle = '#999'
context.moveTo(0, -135);
}
context.lineTo(0, -150);
context.stroke();
context.closePath();
// 每画一个刻度进行转动6度
context.rotate(Math.PI / 30);
};

// 获取时间
var date = new Date(),
sec = date.getSeconds(),
min = date.getMinutes() + sec / 60, // 每一秒为分钟里的六十分之一
hour = date.getHours()*5 + min / 12; // 30度里面,分钟每次只能转动0.5度
// 时针 先转动画布,再对其画时针或者分针、秒针
context.rotate(hour * Math.PI / 30);
context.beginPath();
context.lineWidth = 7;
context.moveTo(0, 0);
context.lineTo(0, -80);
context.stroke();
context.closePath();
// 画完之后要对其进行逆方向转动
context.rotate(hour * (-Math.PI / 30));

// 分针
context.rotate(min * Math.PI / 30);
context.beginPath();
context.lineWidth = 5;
context.moveTo(0, 0);
context.lineTo(0, -90);
context.stroke();
context.closePath();
// 画完之后要对其进行逆方向转动
context.rotate(min * (-Math.PI / 30));

// 秒针
context.rotate(sec * Math.PI / 30);
context.beginPath();
context.lineWidth = 2;
context.moveTo(0, 0);
context.lineTo(0, -100);
context.stroke();
context.closePath();
// 画完之后要对其进行逆方向转动
context.rotate(sec * (-Math.PI / 30));
}draw();
// 启动计时器
timer = setInterval(draw, 16);
</script>
</html>

源代码下载(密码8eb9)
  评论这张
 
阅读(122)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017