2.另外一种方法实现百度北京时间时钟

时间 2020-01-29

标签另外一种方法实现百度北京时间时钟繁體版

原文原文链接

接上一篇，本篇经过直接用正余弦计算角度的方法来绘图。html

效果预览：https://codepen.io/andy-js/pen/bGNYgPL
右键打开新窗口预览效果更好哦！canvas

直接上代码：微信

<!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,   //每遇五、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>