您的位置：首页 > 其它

canvas绘制电子时钟

2016-10-27 20:11 246 查看

HTML5新增了许多实用的属性，今天带来一款用canvas绘制的电子时钟.

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>canvas-时钟</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background: #f0f0f0;
}
#canvas{
width: 400px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){

init();
// 初始化
function init(){
// 页面打开时执行一次clock函数
clock();
// 每隔一秒执行一次clock函数
setInterval(clock,1000);
}
function clock(){
// 获取canvas画布
var canvas = document.getElementById("canvas");
var ctx =  canvas.getContext("2d");
// 创建时间对象并获取当前系统时间
var now_data = new Date();
// 小时,电脑系统时间为24制,时钟为12制
var hour = now_data.getHours()%12;
// 分钟
var min = now_data.getMinutes();
// 秒
var sec = now_data.getSeconds();
// 准备绘制
ctx.save();
// 每次绘制之前应将画布清除再继续绘制
ctx.clearRect(0,0,canvas.width,canvas.height);
// 将中心点移动到(200,200)
ctx.translate(200,200);
// 绘制刻度线
for(var i=1;i<=60;i++){
// 整个表盘分为12份，一份代表每一小时
if(i%5==0){
ctx.save();
ctx.beginPath();
ctx.rotate(Math.PI/30);
ctx.moveTo(140,0);
ctx.lineTo(150,0)
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 整个表盘分为60份，一份代表每一分钟
ctx.beginPath();
// 每一分钟旋转6度
ctx.rotate(Math.PI/30);
ctx.moveTo(145,0);
ctx.lineTo(150,0);
ctx.stroke();
ctx.closePath();
}
// 绘制秒针
ctx.save()
ctx.beginPath();
// 获取当前系统时间再进行旋转,
// 秒针旋转角度为当前获取的秒数*6度
ctx.rotate(sec*Math.PI/30);
ctx.moveTo(0,20);
ctx.lineTo(0,-138);
ctx.lineWidth=1;
ctx.stroke();
ctx.closePath();
ctx.restore();
// 绘制分针
ctx.save();
ctx.beginPath();
// 分针旋转的角度为当前分钟数*6度+当前秒针数*(6度/60)
// 秒针走60下，分针走一下
ctx.rotate(min*Math.PI/30+ sec*(Math.PI/30/60));
ctx.moveTo(0,20);
ctx.lineTo(0,-130);
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
ctx.restore();
// 时针
ctx.save();
ctx.beginPath();
// 时针旋转角度为当前小时数*30度+当前分钟数*(0.5度)+当前秒针数*(0.5/60度)
// hour*(Math.PI/6):每过一个小时，应该旋转30度
// min*(Math.PI/6/60):分针走60下，时针动一下
// sec*(Math.PI/6/60/60):秒针走3600下，时钟动一下
ctx.rotate(hour*(Math.PI/6)+min*(Math.PI/6/60)+sec*(Math.PI/6/60/60));
ctx.moveTo(0,10);
ctx.lineTo(0,-120);
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
ctx.restore();
// 开始绘制外面的圆
ctx.beginPath();
ctx.arc(0,0,150,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航