canvas 钟表

╰半橙微兮° 2022-05-18 02:39 245阅读 0赞

<!doctype html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>无标题文档</title>
    
    <script>
    
    /*arc(x,y,半径，起始弧度，结束弧度，旋转方向)*/
    
    window.onload = function(){
    
    var oC = document.querySelector('#box');
    
    var oGC = oC.getContext('2d');
    
    
    
    var x = 200.5;
    
    var y = 200.5;
    
    var r = 200;
    
    
    
    function timer(){
    
    oGC.clearRect(0,0,oC.width,oC.height)
    
    var time = new Date();
    
    var h = time.getHours();
    
    var m = time.getMinutes();
    
    var s = time.getSeconds();
    
    
    
    var h_val = (h*30-90+m/60*30)*Math.PI/180;
    
    var m_val = (m*6-90+s/60*6)*Math.PI/180;
    
    var s_val = (s*6-90)*Math.PI/180;
    
    
    
    
    
    /*生成小刻度*/
    
    oGC.beginPath();
    
    oGC.moveTo(x,y);
    
    oGC.lineWidth = 1;
    
    for(var i = 0;i<60;i++){
    
    oGC.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
    
    oGC.closePath();
    
    }
    
    oGC.stroke();
    
    
    
    /*生成一个白色遮罩层*/
    
    oGC.beginPath();
    
    oGC.fillStyle = '#fff';
    
    oGC.moveTo(x,y);
    
    oGC.arc(x,y,r*0.95,0,2*Math.PI,false);
    
    oGC.closePath();
    
    oGC.fill();
    
    
    
    /*生成大刻度*/
    
    oGC.beginPath();
    
    oGC.lineWidth = 2;
    
    oGC.moveTo(x,y);
    
    for(var i = 0;i<12;i++){
    
    oGC.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
    
    oGC.closePath();
    
    }
    
    oGC.stroke();
    
    
    
    /*生成一个白色遮罩层*/
    
    oGC.beginPath();
    
    oGC.fillStyle = '#fff';
    
    oGC.moveTo(x,y);
    
    oGC.arc(x,y,r*0.9,0,2*Math.PI,false);
    
    oGC.closePath();
    
    oGC.fill();
    
    
    
    
    
    /*时针*/
    
    oGC.beginPath();
    
    oGC.lineWidth = 4;
    
    oGC.moveTo(x,y);
    
    oGC.arc(x,y,r*0.5,h_val,h_val);
    
    oGC.closePath();
    
    oGC.stroke();
    
    
    
    
    
    /*分针*/
    
    oGC.save();
    
    oGC.beginPath();
    
    oGC.strokeStyle = '#00f';
    
    oGC.lineWidth = 2;
    
    oGC.moveTo(x,y);
    
    oGC.arc(x,y,r*0.6,m_val,m_val);
    
    oGC.closePath();
    
    oGC.stroke();
    
    oGC.restore();
    
    
    
    /*秒针*/
    
    oGC.save();
    
    oGC.beginPath();
    
    oGC.strokeStyle = '#f00';
    
    oGC.lineWidth = 1;
    
    oGC.moveTo(x,y);
    
    oGC.arc(x,y,r*0.7,s_val,s_val);
    
    oGC.closePath();
    
    oGC.stroke();
    
    oGC.restore();
    
    
    
    /*刻度钉*/
    
    oGC.fillStyle = '#f00';
    
    oGC.beginPath();
    
    oGC.moveTo(x,y)
    
    oGC.arc(x,y,r*0.03,0,2*Math.PI)
    
    oGC.closePath();
    
    oGC.fill();
    
    }
    
    timer();
    
    setInterval(timer,500);
    
    }
    
    </script>
    
    </head>
    
    
    
    <body>
    
    <canvas id="box" height="400" width="400" style="border:1px solid #000"></canvas>
    
    </body>
    
    </html>