javascript 画时针

最新推荐文章于 2021-11-10 23:48:54 发布

ZJE_ANDY

最新推荐文章于 2021-11-10 23:48:54 发布

阅读量411

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/u014453898/article/details/80014396

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style>
        body{
            background-color: pink;
        }
        #clock{
            display: block;
            margin:auto;
            background-color: burlywood;
        }
    </style>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("clock");
            var context = canvas.getContext("2d");
            
            function drawClock() {
                context.clearRect(0,0,canvas.width,canvas.height);
                var circleX = 200;
                var circleY = 200;
                var radius = 190;

                //获取时间信息
                var date = new Date();
                var hour = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();

                //时针，分针，秒针的弧度计算(下面有详细推导过程)
                var hourValue = (-90 + 30*hour + min/2 + sec/120)*Math.PI/180;
                var minValue = (-90 + 6*min + 0.1*sec)*Math.PI/180;
                var secValue = (-90 + 6*sec)*Math.PI/180;

                //绘制表盘
                context.beginPath();     //相当于提起笔，准备下一次绘图，并把绘图的坐标重置在(0,0)
                context.font = "bold 16px Arial";
                context.lineWidth = "3";

                context.arc(circleX,circleY,radius,0,360*Math.PI/180)
                context.stroke();//下笔画

                context.fillStyle='#0ff';
                context.beginPath();    // 提起笔
                context.moveTo(circleX,circleY);
                context.arc(circleX,circleY,radius*19/20,0,360*Math.PI/180,false);
                context.closePath();//笔尖回到起点
                context.fill();

                //绘制钟表中心(一点)
                context.beginPath();
                context.arc(200,200,6,0,360,false)
                context.fillStyle="#000"
                context.fill()
                context.closePath()

                //绘制时针
                context.lineWidth = "5"
                context.beginPath()
                context.moveTo(circleX,circleY)
                context.arc(circleX,circleY,radius*9/20,hourValue,hourValue,false)
                context.stroke()

                //绘制分针
                context.lineWidth = "3"
                context.beginPath()
                context.moveTo(circleX,circleY)
                context.arc(circleX,circleY,radius*13/20,minValue,minValue,false)
                context.stroke()

                //绘制秒针
                context.lineWidth = "1"
                context.beginPath()
                context.moveTo(circleX,circleY)
                context.arc(circleX,circleY,radius*18/20,secValue,secValue,false)
                context.stroke()

                //绘制数字
                context.fillText("12",circleX,circleY-radius*17/20)
                context.fillText("3",circleX+radius*17/20,circleY)
                context.fillText("6",circleX,circleY+radius*17/20)
                context.fillText("9",circleX-radius*17/20,circleY)
            }
            setInterval(drawClock,1000)
            //drawClock();
        }
    </script>
</head>
<body>
    <canvas id="clock" width="400" height="400"></canvas>
</body>
</html>

时针，分针，秒针的弧度推导过程：

弧度 = 角度数 * Math.PI/180；

时针：

时针转一圈：即360°，12小时，所以，时针1小时转 360/12 = 30°

又，1小时为 60分钟，3600秒，即时针转30°为60分钟，3600秒。

所以，每分钟时钟转 0.5°，每秒钟，时钟转 30/3600 = 1/120 °

所以若得知，时分秒的值，可算的时钟转过的度数为 (30*hour+0.5*min+1/120*sec)

由于时钟是从12点钟方向开始算起的(一般0°是在水平方向)，所以要 -90°

所以时针划过的弧度数为： (-90 + 30*hour+0.5*min+1/120*sec)*Math.PI/180

分针：

由于分钟转过一圈(360°)为 60min 所以 1min转过 360/60 = 6°

又一分钟 60秒，即60秒，分针转过6°，所以每秒分针转过 6/60 = 0.1°