js实现时钟

最新推荐文章于 2022-07-10 17:30:36 发布

菜鸟猪猪侠yy

最新推荐文章于 2022-07-10 17:30:36 发布

阅读量3.7k

点赞数 5

分类专栏：个人demo 文章标签： javascript

原文链接：https://blog.csdn.net/s1879046/article/details/76557791?utm_source=app&app_version=4.9.1&code=app_1562916241&uLinkId=usr1mkqgl919blen

版权

个人demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用js写一个时钟

我这个是仿造别人写的。当我拿到别人代码的时候有很多地方都不明白为什么要这么写。但通过自己一步步分析，加深百度最后终于解决了问题。就是关于canvas的save()和restore()还是有点不明白。虽然看了解释但还是没能真正体会它的用处，可能后续还需要多加体会才能够理解吧。虽然这是仿造别人的，但是我希望通过写下这个博客来记录自己的学习经历。希望大家多多指教。
代码部分，其中都有详细的解释。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #canvas {
        position: absolute;
        left: 27%;
        top: 15%;
        border: 1px solid black;
    }
</style>

<body>
    <canvas id="canvas" height="400" width="500"></canvas>
    <script type="text/javascript">
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        // 获取画布高度
        var heightCanvas = ctx.canvas.height;
        console.log("画布高度：" + heightCanvas);
        //获取画布宽度
        var widthCanvas = ctx.canvas.width;
        console.log("画布宽度：" + widthCanvas);
        //钟表半径
        const r = 120;
        // 绘制圆  弧度=(Math.PI/180)*角度。
        const pi = Math.PI;
        // 改变画布的原点
        ctx.translate(250, 200);
        // 绘制钟表背景
        function drawBackground() {
            ctx.beginPath();
            ctx.arc(0, 0, r, 0, 2 * pi, true);
            // 设置线性宽度
            ctx.lineWidth = 5;
            ctx.strokeStyle = "black";
            ctx.stroke();
            //绘制中心点
            ctx.beginPath();
            ctx.arc(0, 0, 3, 0, 2 * pi, true);
            ctx.lineWidth=1;
            //设置填充颜色   注意：如果半径太小会导致填充的颜色不起作用，此时应该放讲线的宽度调小
            ctx.fillStyle = "white";
            // 开始填充
            ctx.fill();
            ctx.stroke();
        }

        // 绘制时刻
        function drawTime() {
            // 定义一个用于存放时刻数字的数组
            var timeArray = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            // 初次调用：number=3，index=0 即：number代表数值 index代表下标
            timeArray.forEach(function (number, index) {
                // console.log("number=" + number, "index=" + index);
                var rad = 2 * pi / 12 * index;
                var x = Math.cos(rad) * (r - 30);
                var y = Math.sin(rad) * (r - 30);

                ctx.textAlign = 'center';
                // 让数字落在坐标的中心
                ctx.textBaseline = 'middle';
                ctx.fillStyle = "black";
                // 在坐标为(x,y)的地方绘制number
                ctx.fillText(number, x, y);
            });
            //绘制刻度
            var i;
            for (i = 0; i < 60; i++) {
                var rad = (2 * pi / 60) * i;
                var x = Math.cos(rad) * (r - 20) ;
                // console.log("x=" + x);
                var y = Math.sin(rad) * (r - 20);
                // console.log("y=" + y);
                ctx.beginPath();
                // 开始绘制圆
                ctx.arc(x, y, 2, 0, 2 * pi);
                if (i % 5 == 0) {
                    ctx.fillStyle = "black";
                }
                else {
                    ctx.fillStyle = "gray";
                }
                ctx.fill();
            }
        }
        // 绘制秒针
        function drawsecond(ms) {
            ctx.save();
            // 清空子路径列表来启动新路径。
            ctx.beginPath();
            var rad = (2 * pi / 60)*(ms-15);
            // 旋转画布
            ctx.rotate(rad);            
            ctx.moveTo(-5,0);
            ctx.lineTo(90,0);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "red";
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
        //绘制分针
        function drawminute(minute) {            
            ctx.save();
            // 清空子路径列表来启动新路径。
            ctx.beginPath();
            var rate=(2*pi/60)*(minute-15);
            ctx.rotate(rate);
            ctx.moveTo(0,0);
            ctx.lineTo(70,0);
            ctx.lineWidth = 2;
            ctx.lineCap="round";
            ctx.strokeStyle = "blue";
            ctx.stroke();
            ctx.restore();
        }

        //绘制时针
        function drawhour(hour, minute) {
            // 清空子路径列表来启动新路径。
            ctx.save();
            ctx.beginPath();
            //每小时弧度
            var rad = (2 * pi/12)*(hour-3) ;
            //每分钟弧度
            var mrad = (2 * pi/12 / 60)*(minute-15);
            // 对画布进行旋转
            ctx.rotate(rad + mrad);
            // 设置画布样式
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            ctx.strokeStyle = "black";
            ctx.moveTo(0,0);
            ctx.lineTo(45,0);

            ctx.stroke();
            ctx.restore();
        }


        function start() {
            ctx.clearRect(-250,-200, 500,400);
            var time = new Date();
            var hour = time.getHours();
            console.log(hour);
            var minute = time.getMinutes();
            var second = time.getSeconds();
            console.log(second);
            console.log("second="+second);
            drawBackground();
            drawTime();
            drawhour(hour,minute); 
            drawminute(minute);
            drawsecond(second);

           
        }
        start();
        // 每1秒刷新一次
        setInterval(start, 1000);
    </script>
</body>

</html>

这是最终实现的结果，通过可以调用内置函数Date可以实现实时的时间展示

菜鸟猪猪侠yy

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
js实现时钟

用js写一个时钟我这个是仿造别人写的。当我拿到别人代码的时候有很多地方都不明白为什么要这么写。但通过自己一步步分析，加深百度最后终于解决了问题。就是关于canvas的save()和restore()还是有点不明白。虽然看了解释但还是没能真正体会它的用处，可能后续还需要多加体会才能够理解吧。虽然这是仿造别人的，但是我希望通过写下这个博客来记录自己的学习经历。希望大家多多指教。代码部分，其中都有详细的解释。<!DOCTYPE html><html lang="en">
复制链接

扫一扫