接上一篇，本篇通过直接用正余弦计算角度的方法来绘图。
效果预览：https://codepen.io/andy-js/pen/bGNYgPL
右键打开新窗口预览效果更好哦！
直接上代码：
<!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>
#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");
var radius = oC1.offsetWidth / 2; //中心点
//***这次不旋转画布，直接通过度角来计算位置
//1.先画表盘
ctx1.lineWidth = 1; //线的宽度
var minutesAngle=360 / 60, //每一分钟的角度
HourAngle=360 / 12; //每小时的角度
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";
};
var thisAngle=i*minutesAngle;
var startXY=getXY(thisAngle,radius-lineLength);
var endXY=getXY(thisAngle,radius);
ctx1.beginPath(); //起始一条路径
ctx1.moveTo(radius+startXY.x,radius+startXY.y); //画直线的起点 起点终点都要从正中间的坐标位置开始计算
ctx1.lineTo(radius+endXY.x, radius+endXY.y); // 终点
ctx1.stroke(); //绘制已定义的路径
ctx1.closePath(); //关闭路径
};
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;
draw(3, "#fff", HourAngle * hour, 16); //时针
draw(2, "#fff", minute*minutesAngle, 22); //分针
draw(1, "#d93c3c", second*minutesAngle, 24);//秒针
};
function draw(lineWidth, strokeStyle, angle, height) {
var startXY=getXY((angle+180)%360,6);
var endXY=getXY(angle,height);
ctx2.lineWidth = lineWidth, //线条宽度
ctx2.strokeStyle = strokeStyle, //颜色
ctx2.beginPath(),
ctx2.moveTo(radius+startXY.x,radius+startXY.y);
ctx2.lineTo(radius+endXY.x, radius+endXY.y);
ctx2.stroke(),
ctx2.closePath();
};
function getXY(angle,radius){ //通过正余弦区取XY坐标
return {
x:Math.sin((180-angle)*Math.PI/180)*radius,
y:Math.cos((180-angle)*Math.PI/180)*radius
}
};
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。