<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
.box{
background: #f1f1f1;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" class="box" width="500" height="500"></canvas>
<script type="text/javascript">
(function(){
var canvas = document.getElementById('canvas'); //获取画布id
var ctx = canvas.getContext('2d'); //创建一个画布上的绘图环境，暂时只支持2d 二维绘图
var d,h,m,s; //创建时分秒变量
function now(){
d = new Date(); //新建一个时间对象 获取当前时间
h = d.getHours(); //获取当前时间的小时数
m = d.getMinutes(); //获取当前时间的分钟数
s = d.getSeconds(); //获取当前四件的 秒数
h += m/60; //把当前时间的分钟数换算城小时数
h = h > 12 ? h -12 : h; //如何当前时间小时超过12小时 也就是一周了 就减去12赋值 没有的话 就直接返回
}
//表盘
function drawBase(){
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
ctx.lineWidth = 10; //lineWidth 属性设置或返回当前线条的宽度，以像素计。
ctx.strokeStyle = '#99ccff'; //属性设置或返回用于笔触的颜色、渐变或模式。
ctx.arc(250, 250, 200, 0, 360, false); //这个方法的头 5 个参数指定了圆周的一个起始点和结束点
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
ctx.stroke(); //方法绘制当前路径的边框
}
//时钟刻度
function drawHourDegree(){
for(var i = 0; i < 12; i++){
ctx.save(); //保存当前图像状态的一份拷贝。
ctx.lineWidth = 5; //lineWidth 属性设置或返回当前线条的宽度，以像素计。
ctx.translate(250, 250); //转换画布的用户坐标系统,为画布的变换矩阵添加水平的和垂直的偏移。
ctx.rotate( i * 30 * Math.PI / 180 );
//i 小时 乘以偏移的一个小时的角度（360/12)30 乘以圆周率 再除以180 就是弧长 弧长公式 nπr/180
//通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas>
//元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
ctx.moveTo(0, -190); //开始一条路径，移动到位置 x,y 开始点
ctx.lineTo(0, -170); //添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
ctx.strokeStyle = '#333'; //属性设置或返回用于笔触的颜色、渐变或模式。
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
ctx.stroke(); //方法绘制当前路径的边框
ctx.restore(); //弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值
}
}
//分针盘
function drawMinDegree(){
for(var i = 0; i < 60 ; i++){
ctx.save(); //保存当前图像状态的一份拷贝。
ctx.translate(250, 250); //转换画布的用户坐标系统,为画布的变换矩阵添加水平的和垂直的偏移。
ctx.rotate(i * 6 * Math.PI / 180);
//i分钟 乘以偏移的一分钟的角度（360/60)6 乘以圆周率 再除以180 就是弧长 弧长公式 nπr/180
//通过指定一个角度，改变了画布和web浏览器中的<Canvas>
//元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为（0，0）
ctx.moveTo(0, -190); //开始一条路径，移动到位置x，y 开始点
ctx.lineWidth = 5; //lineWidth 属性设置或返回当前线条的宽度，以像素计
ctx.lineTo(0, -180) //添加一个新点，然后创建从该点到画布中最后指定的线条（该方法并不会创建线条）
ctx.strokeStyle = '#999'; //属性设置或返回用于笔触的颜色、渐变、或模式
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
ctx.stroke(); //方法绘制当前路径的边框
ctx.restore(); //弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值
}
}
//时针
function drawHour(){
ctx.save(); //保存当前图像状态的一份拷贝。
ctx.translate(250,250); //转换画布的用户坐标系统，为画布的变换矩阵添加水平的和垂直的偏移。
ctx.rotate(h * 30 * Math.PI / 180);
//h小时 乘以偏移的一小时的角度(360/12)30 乘以圆周率 在除以180 就是弧长 弧长公式 nπr/180
//通过指定一个角度，改变了画布和文本浏览器中的<Canvas>
//元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为（0，0）
ctx.moveTo(0, -110); //开始一条路径，移动到位置x，y开始点
ctx.lineTo(0, 30); //添加一个新点，然后创建从该点到画布中最后指定的线条（该方法并不会创建线条）
ctx.lineWidth = 9; //lineWidth 属性设置或返回当前线条的宽度，已像素计
ctx.strokeStyle = '#333'; //属性设置或返回用于笔触的颜色、渐变、或模式
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它
ctx.stroke(); //方法绘制当前的路径的边框
ctx.restore(); //弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值
}
//分针
function drawMin(){
ctx.save(); //保存当前图像状态的一份拷贝。
ctx.translate(250, 250); //转换画布的用户坐标系统，为画布的变换矩阵添加水平的和垂直的偏移。
ctx.rotate(m * 6 * Math.PI / 180);
//m分钟 乘以偏移的一分钟的角度(360/60)6 乘以圆周率 在除以 180 就是弧长 弧长公式 nπr/180
//通过指定一个角度，改变画布和文本浏览器中的<Canvas>
//元素的像素之间的映射，舍得任意后续绘图在画布中都显示为旋转的
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。 它把当前的点设置为（0，0）
ctx.moveTo(0, -130); //开始一条路径，移动到位置x，y开始点
ctx.lineWidth = 7; //lineWidth 属性设置或返回当前线条的宽度，已像素计
ctx.lineTo(0, 25); //添加一个新点，然后创建从该点到画布中最后指定的线条（该方法并不会创建线条）
ctx.strokeStyle = 'green'; //属性设置或返回当前线条的颜色、渐变、或模式
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它
ctx.stroke(); // 方法绘制当前的路径的边框
ctx.restore(); //弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值
}
//中间圆点
function drawMiddle(){
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。 它把当前的点设置为(0,0)
ctx.arc(250, 250, 10, 0, 360, false); //这个方法的头 5 个参数指定了圆周的一个起始点和结束点
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它
ctx.fill(); //方法填充当前的图像（路径）。默认颜色是黑色。
}
//秒针
function drawSecond(){
ctx.save(); //保存当前图像的一份拷贝。
ctx.translate(250, 250); //转换画布的用户坐标系统，为画布的变换矩阵添加水平的和垂直的偏移。
ctx.rotate(s * 6 * Math.PI / 180);
//s秒钟 乘以偏移的一秒钟的角度 (360/60)6 乘以圆周率 在除以 180 就是弧长 弧长公式 nπr/180
//通过指定一个角度，改变画布和文本浏览器中的<Canvas>
//元素的像素之间的映射，舍得任何后续绘图在画布中都显示为旋转的
ctx.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。 它把当前的点设置为（0，0）
ctx.moveTo(0, 150); //开始一条路径，移动到位置x，y开始点
ctx.lineWidth = 3; //lineWidth 属性设置或返回当前线条的宽度，已像素计
ctx.strokeStyle = 'red'; //属性设置或返回当前线条的颜色、渐变、或模式
ctx.lineTo(0, -25); //添加一个新点，然后创建从该点到画布中最后指定的线条
ctx.closePath(); //如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它
ctx.stroke(); //方法绘制当前的路径的边框
ctx.restore(); //弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值
}
//整体调用函数
function clock(){
ctx.clearRect(0, 0, 500, 500); //方法清空给定矩形内的指定像素。语法context.clearRect(x,y,width,height);
now(); //获取当前时间的时分秒
drawBase(); //写入一个表盘
drawMinDegree(); //写入时钟刻度
drawHourDegree(); //写入分针盘
drawHour(); //写入时针
drawMin(); //写入分针
drawMiddle() //写入圆点
drawSecond(); //秒针
}
clock();
setInterval(function(){
clock();
}, 1000);
}());
</script>
</body>
</html>