最近公司销售有业务需要，要修改百度页面的北京时间，拍照和录视频。所以参考百度原代码，做了一些注释。在下一篇文章中，我会用另一种方法，也写出这个效果。
效果预览：https://codepen.io/andy-js/pen/wvBPgBW
右键打开新窗口预览效果更好哦！
直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>andy-js:模仿百度北京时间时钟</title>
<style>
*{margin:0;padding:0}
#box{width:100px;height:100px;position: relative;margin:200px auto;background:linear-gradient(#0b6ec2,#6aa9e1)}
#c1{position: absolute;top:50%;left:50%;z-index: 1;margin:-33px 0 0 -33px;}
#c2{position: absolute;top:50%;left:50%;z-index: 2;margin:-33px 0 0 -33px;}
</style>
</head>
<body>
<div id="box">
<canvas id="c1" width="66" height="66"></canvas>
<canvas id="c2" width="66" height="66"></canvas>
</div>
<script>
var oC1=document.getElementById('c1'); //表盘
var oC2=document.getElementById('c2'); //指针
var ctx2 = oC2.getContext("2d"),ctx1 = oC1.getContext("2d");
//1.先画表盘
var lineLength, //标线长度
radius = oC1.offsetWidth / 2;
ctx1.lineWidth = 1; //线的宽度
ctx1.translate(radius, radius); //重新映射画布上的 (0,0) 位置 映射到画布正中间
for (var i = 0; i < 60; i++) {
lineLength = 4; //默认长度
ctx1.strokeStyle = "rgba( 255, 255, 255, 0.3 )"; //默认标线颜色，1234淡一点
if ( i % 5 == 0) {
lineLength = 8, //每遇5、0长一点
ctx1.strokeStyle = "#fff";
};
ctx1.beginPath(); //起始一条路径
ctx1.moveTo(0, lineLength - radius); //画直线的起点，比如第一条线是0点的位置，现在中心点已经是00坐标，所以第一条线应该是X=0,Y=-(33-8); 33是半径
ctx1.lineTo(0, -radius); //然后一直画到半径最边上
ctx1.stroke(); //绘制已定义的路径
ctx1.closePath(); //关闭路径
ctx1.rotate(Math.PI / 30); //旋转当前画布 旋转一分钟 Math.PI=180度=30分钟=半圆
};
render(); //2.打开页面默认显示
setInterval(render,1000); //3.每秒种重绘一次
function render(){
ctx2.clearRect(0, 0, 2 * radius, 2 * radius); //每次都清空画布 重新画
var oDate=new Date(); //获取当前时间
var hour = oDate.getHours(), //小时
minute = oDate.getMinutes(), //分
second =oDate.getSeconds(); //秒
hour > 12 && (hour -= 12);
hour += minute / 60;
minute += second / 60;
draw(3, "#fff", Math.PI / 6 * hour, -16); //时针
draw(2, "#fff", Math.PI / 30 * minute, -22); //分针
draw(1, "#d93c3c", Math.PI / 30 * second, -24);//秒针
};
function draw(lineWidth, strokeStyle, rotate, end) {
ctx2.save(), //保存当前的画布状态 保存映射和旋转之前的状态
ctx2.lineWidth = lineWidth, //线条宽度
ctx2.strokeStyle = strokeStyle, //颜色
ctx2.translate(radius, radius), //重新映射画布上的 (0,0) 位置 映射到画布正中间
ctx2.rotate(rotate), //旋转 ###重点是这里的旋转
ctx2.beginPath(),
ctx2.moveTo(0, 6), //三根指针总是从00位置另一端多出来一小段
ctx2.lineTo(0, end), //三根指针的长度
ctx2.stroke(),
ctx2.closePath(),
ctx2.restore(); //返回之前保存过的路径状态和属性
};
/*
###旋转讲解
前面说过 Math.PI=180度=30分钟=半圆
所以 Math.PI / 30 等于 1分钟的角度
1.second秒针本身就是1-60之间，所以这里很好理解 当前是多少秒就旋转多少角度
2.时钟 Math.PI/6= 30分钟/6=半圆/6 = 每五分钟 = 每1小时的角度
我们在前面已经通过 hour > 12 && (hour -= 12); 将时针的数值固定在 <=12
再通过 hour += minute / 60; 得到基数为12的相应的时间比例 因为钟表的一圈有12个时间
再用我们得到的 每1小时的角度 * 相应的比例
3.分钟 与时钟同理
*/
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。