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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。