鐘表（canvas）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鐘表</title>
    <style>
        canvas{
            position: absolute;
            left:10;
            top:10;
        }
    </style>
</head>
<body>
    <canvas id="dial_canvas"></canvas>
    <canvas id="hand_canvas"></canvas>

    <script>
        var w = 800;  //畫布寬度
        var h = 600;  //畫布高度
        var r = 200;  //表的半徑

        var dial_canvas = document.getElementById("dial_canvas");  //獲取表盤canvasdom
        var hand_canvas = document.getElementById("hand_canvas");  //獲取指針canvasdom

        dial_canvas.width = w;
        dial_canvas.height = h;
        hand_canvas.width = w;
        hand_canvas.height = h;

        var dial_cxt = dial_canvas.getContext("2d"); //獲取表盤繪圖環境
        var hand_cxt = hand_canvas.getContext("2d"); //獲取指針繪圖環境

        //繪制表盤
        dial_cxt.beginPath();
        dial_cxt.arc(w/2, h/2, r, 0, Math.PI*2);
        dial_cxt.lineWidth = 10;
        dial_cxt.strokeStyle = "#000";
        dial_cxt.stroke();

        //繪制刻度 小時 (大刻度)
        drawScale(dial_cxt, w/2, h/2, r, r-20, 12, 10);

        //繪制刻度 分鐘（小刻度）
        drawScale(dial_cxt, w/2, h/2, r, r-10, 60, 2);


        //定時繪制指針
        function run(){
            var date = new Date(); //時間對象

            //清空畫布
            hand_cxt.clearRect(0,0,w,h);

            //獲取秒
            var seconds = date.getSeconds();
            drawHand(hand_cxt, w/2, h/2, seconds / 60 * 360, 180, 2, "red");
            
            //分針
            var minutes = date.getMinutes() + seconds / 60;
            drawHand(hand_cxt, w/2, h/2, minutes / 60 * 360, 150, 5, "#000");

            //時針
            var hours = date.getHours() % 12 + minutes / 60;
            drawHand(hand_cxt, w/2, h/2, hours / 12 * 360, 120, 8, "#000");

            setTimeout(run, 1000);
        }
        run();


        /**
         * 繪制指針
         * @param object cxt 繪圖環境
         * @param number x 表中心的x坐標
         * @param number y 表中心的y坐標
         * @param number angle 指針旋轉的角度
         * @param number length 指針長度
         * @param number lineWidth 指針寬度
         * @param string  strokeStyle 指針顏色
        */
        function drawHand(cxt, x, y, angle, length, lineWidth=8, strokeStyle="#000") {

            cxt.save(); //保存環境

            cxt.beginPath(); //開啟路徑

            cxt.translate(x, y);
            cxt.rotate((angle - 90)/180 * Math.PI);

            cxt.moveTo(-20, 0);
            cxt.lineTo(length, 0);

            cxt.lineWidth = lineWidth;
            cxt.strokeStyle = strokeStyle;
            cxt.stroke();

            cxt.restore(); //恢復環境
        }

        /**
         * 繪制刻度
         * @param object cxt 繪圖環境
         * @param number x 圓心x坐標
         * @param number y 圓心y坐標
         * @param number innerRadius 內圓的半徑
         * @param number outerRadius 外圓的半徑
         * @param int   number 刻度的個數
         * @param number lineWidth 刻度的寬度
         * @param string strokeStyle 刻度的顏色  
        */
        function drawScale(cxt,x,y,innerRadius,outerRadius, number = 12, lineWidth = 10, strokeStyle = "#000"){

            var angle = 0;
            var angleDiff = 360 / number;  //間隔的度數
            
            for (var i = 0; i < number; i ++) {
                var x1 = Math.cos(angle / 180 * Math.PI) * outerRadius + w/2;
                var y1 = Math.sin(angle / 180 * Math.PI) * outerRadius + h/2;
                var x2 = Math.cos(angle / 180 * Math.PI) * innerRadius + w/2;
                var y2 = Math.sin(angle / 180 * Math.PI) * innerRadius + h/2;

                cxt.beginPath();
                cxt.moveTo(x1, y1);
                cxt.lineTo(x2, y2);
                cxt.lineWidth = lineWidth;
                cxt.strokeStyle = strokeStyle
                
                cxt.stroke();

                angle += angleDiff;
            }


        }



    </script>
    
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容