用canvas的arc繪製時鐘

時間 2019-11-13

標籤 canvas arc 繪製時鐘简体版

原文原文鏈接

在頁面上加入canvas標籤：canvas

<body>
<canvas id="c1"  width="600px" height="600px"> 
    <span>不支持canvas瀏覽器</span>
</canvas> <!--默認：寬300 高150-->
</body>

js部分：瀏覽器

繪製秒的刻度的思路是先用oGC.stroke()循環畫60個6°的扇形，將它們拼接成一整個圓，而後用oGC.fill()畫一個實心的圓，半徑比以前拼接的那個圓短，用實心的圓擋住中間多餘的線，這樣秒的刻度就畫出來了，以此類推能夠畫出分的刻度；函數

讓時鐘自動走起來：獲取new Date()下的真實時、分、秒時間，而後用‘角度*Math.PI/180=弧度’的公式換算成弧度，賦值給時針、分針、秒針的圓中對應的弧度值，注意：弧度的變化是沿着順時針的方向增長的，也就是在秒針指向0秒時，它的弧度是-90°。最後設置一個定時器，每隔1s調用一次封裝的函數：spa

<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  

    function toDraw(){
        var a = 200;
        var b = 200;
        var r = 100;

        oGC.clearRect(0,0,oC.width,oC.height);

        //獲取時間
        var oDate = new Date();
        var oHour = oDate.getHours();
        var oMin = oDate.getMinutes();
        var oSec = oDate.getSeconds();

        var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180;
        var oMinvalue = (-90 + oMin*6 )*Math.PI/180;
        var oSecvalue = (-90 + oSec*6 )*Math.PI/180;

        //繪製秒的刻度
        oGC.beginPath();
        for(var i=0;i<60;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = 'white';
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();


        //繪製分的刻度
        oGC.lineWidth = 3;
        oGC.beginPath();
        for(var i=0;i<12;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = 'white';
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //繪製時針
        oGC.lineWidth = 4;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false);
        oGC.closePath();
        oGC.stroke();

        //繪製分針
        oGC.lineWidth = 2;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false);
        oGC.closePath();
        oGC.stroke();

        //繪製秒針
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false);
        oGC.closePath();
        oGC.stroke();
    }；
    setInterval(toDraw,1000);
};
</script>

相關標籤/搜索

每日一句

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