canvas時(shí)鐘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="drawing" width="400" height="400"></canvas>
</body>

<script>
    // 獲取繪圖上下文
    var drawing = document.getElementById('drawing');

    // 填充和描邊
    var context = drawing.getContext('2d')



    /*
        * rotate(角度) 圍繞遠(yuǎn)點(diǎn)旋轉(zhuǎn)圖像
        * scale(scaleX, scaleY) x和y分別以多少倍進(jìn)行縮放
        * translate(x, y) 將坐標(biāo)原點(diǎn)移動(dòng)到(x, y)
    */
    // 上面畫圓的方法并未更改原點(diǎn)  更改原點(diǎn)之后繪制更加方便
    context.translate(200, 200);

    drawClock();

    function drawClock() {
        // 獲取時(shí)分秒
        var myDate = new Date(); //實(shí)例一個(gè)時(shí)間對(duì)象；
        var year = myDate.getFullYear();   //獲取系統(tǒng)的年；
        var month = myDate.getMonth() + 1;   //獲取系統(tǒng)月份，由于月份是從0開始計(jì)算，所以要加1
        var day = myDate.getDate() > 12 ? myDate.getDate() - 12 : myDate.getDate(); // 獲取系統(tǒng)日，
        var hour = myDate.getHours(); //獲取系統(tǒng)時(shí)，
        var minute = myDate.getMinutes(); //分
        var second = myDate.getSeconds(); //秒
        // console.log(hour, minute, second)
        context.clearRect(-200, -200, 500, 500);
        // 開始路徑
        context.beginPath();

        // 外圓
        context.arc(0, 0, 100, 0, Math.PI * 2, false);
        context.lineWidth = 2;
        context.strokeStyle = '#000';
        context.stroke();
        context.closePath()

        // 內(nèi)圓
        context.beginPath();
        context.lineWidth = 1;
        context.arc(0, 0, 95, 0, Math.PI * 2, false);
        context.strokeStyle = '#000';
        context.stroke();
        context.closePath()

        // 分針
        context.beginPath();
        context.moveTo(0, 0);
        // context.lineTo(0, -70);
        context.lineTo(Math.cos(Math.PI / 180 * (270 + 6 * minute + second / 10)) * 70, Math.sin(Math.PI / 180 * (270 + 6 * minute + second / 10)) * 70);
        // 線的寬度
        context.lineWidth = 3;
        // 線的顏色
        context.strokeStyle = '#ff5000';
        context.stroke();
        context.closePath()

        // 時(shí)針
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(Math.cos(Math.PI / 180 * (270 + 30 * hour + minute / 2)) * 55, Math.sin(Math.PI / 180 * (270 + 30 * hour + minute / 2)) * 55);
        context.lineWidth = 2;
        context.strokeStyle = 'red';
        context.stroke();
        context.closePath()



        // 秒針
        context.beginPath();
        context.moveTo(0, 0);
        // 旋轉(zhuǎn)角度計(jì)算  每次起始位置都從270° 開始  也就是 -90°
        context.lineTo(Math.cos(Math.PI / 180 * (270 + 6 * second)) * 72, Math.sin(Math.PI / 180 * (270 + 6 * second)) * 72);
        context.lineWidth = 1;
        context.strokeStyle = 'green';
        context.stroke();
        context.closePath()


        // 圓心
        context.beginPath();
        // 圓的邊框?qū)挾?        context.arc(0, 0, 5, 0, Math.PI * 2, false);
        // 圓填充顏色
        context.fillStyle = 'red';
        context.fill();
        context.closePath()



        ////// 繪制內(nèi)部刻度

        // 計(jì)算每個(gè)點(diǎn)的  x 和 y
        // x = cos(angle) * 半徑
        // y = sin(angle) * 半徑
        // 需要12個(gè)刻度 豎線刻度
        const mark = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

        // 豎線的起始位置計(jì)算半徑
        const beginPath = 85;

        // 豎線的結(jié)束位置計(jì)算半徑
        const endPath = 95

        const angle = Math.PI * 2 / mark.length
        mark.forEach((ele, index) => {
            context.beginPath();
            ///////////因?yàn)橹霸O(shè)置過fillStyle  所以循環(huán)內(nèi)必須把fillStyle 放在第一個(gè) 否則 3 的顏色會(huì)與之前設(shè)置的一樣
            // 字顏色
            context.fillStyle = 'green';
            // 字居中
            context.textAlign = 'center';
            // 文字基線
            context.textBaseline = 'middle';
            // 刻度
            context.fillText(ele, Math.cos(angle * index) * (beginPath - 8), Math.sin(angle * index) * (beginPath - 8));

            // 繪圖點(diǎn)移到相應(yīng)的位置
            context.moveTo(Math.cos(angle * index) * beginPath, Math.sin(angle * index) * beginPath);
            // 從繪圖點(diǎn)開始繪制直線
            context.lineTo(Math.cos(angle * index) * endPath, Math.sin(angle * index) * endPath);
            // 刻度線顏色
            context.strokeStyle = 'blue';
            // 刻度線寬度
            context.lineWidth = 2;
            context.stroke();
            context.closePath()
        })


        /////// 繪制小刻度的小圓點(diǎn)   
        // 小圓點(diǎn)的圓心位置
        const beginPathSmall = 92;
        // 一共有60個(gè)刻度  除了大刻度豎線豎線之外  還有48個(gè)  所以需要判斷
        const angleSmall = Math.PI * 2 / 60
        var i = 50;
        for (var i = 1; i <= 60; i++) {
            context.beginPath();
            // 大刻度每個(gè)角度是 30deg   小刻度每個(gè)角度間隔6deg  所以判斷如果取余30不為0  則可以畫原點(diǎn)  如果為0  說明當(dāng)前是在大刻度上
            if ((6 * i) % 30) {
                context.arc(Math.cos(angleSmall * i) * beginPathSmall, Math.sin(angleSmall * i) * beginPathSmall, 2, 0, Math.PI * 2, false);
                context.fillStyle = 'orange';
            }
            context.fill();
            context.closePath()
        }
    }

    setInterval(drawClock, 1000);





</script>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容