用DOM画布、H5写一个时钟_用h5画布来写风景时钟-CSDN博客

本文链接：https://blog.csdn.net/pyy13522/article/details/120308165

本文将展示如何利用HTML5的Canvas API和JavaScript编写一个实时更新的时钟。通过DOM画布技术，我们可以绘制出时钟的指针并随着时间变化进行动态更新，实现一个直观且交互式的网页时钟。

摘要由CSDN通过智能技术生成

<!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>
    <style>
        canvas {
            position: absolute;
            left: 28%;
            top: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取画布 canvas标签  用getElementById('id')或者querySelector('标签、选择器...')
            // var canvas = document.getElementById('canvas1');
            var canvas = document.querySelector('canvas');
            // 获取上下文 context   2d模型
            var context = canvas.getContext('2d');
            // 时间刻度 放在setInterval外面避免随着时间推进，字体变粗
            for (i = 1; i <= 12; i++) {//循环12次，刻度1-12，12个数字
                context.save()//保存    把原点保存在（0,0）
                context.beginPath()//放止线段加粗效果影响上面的小圆
                context.translate(300, 300)//平移原点
                context.rotate(i * (Math.PI / 6))//每次循环旋转i*30度
                context.font = "18px bold"//字体大小，粗细
                context.fillStyle = 'gray'//画笔颜色
                context.fillText(i, -5, -215)//fillText('要表示的字符串'，x，y)
                context.restore()//回退原点到（0,0）
            }
            // setInterval(fun(){},1000)按照1s（以毫秒计）来调用该函数
            // 每秒更新一次，使时针、分针、秒针跳转
            setInterval(function () {
                // 绘制圆盘
                context.beginPath()
                context.arc(300, 300, 200, 0, Math.PI * 2)
                context.fillStyle = 'rgb(231, 210, 182)'//绘制填充图形的颜色
                context.fill()  //绘制填充图形
                context.lineWidth = 3   //画笔宽度 后面的绘制受影响
                context.strokeStyle = 'gray'//绘制轮廓图形的颜色
                context.stroke()    //绘制轮廓图形
                context.closePath()
                // 时针刻度
                for (i = 1; i <= 12; i++) {
                    context.save()
                    context.beginPath()//放止线段加粗效果影响上面的小圆
                    context.translate(300, 300)
                    context.rotate(i * (Math.PI / 6))
                    //把画笔放到时钟边缘，从边缘画进来，moveTo的位置可以和lineTo反过来
                    context.moveTo(0, -200)
                    context.lineTo(0, -185)
                    context.lineWidth = 4
                    context.strokeStyle = 'gray'
                    context.stroke()
                    context.restore()
                }
                // 分针刻度
                for (i = 1; i <= 60; i++) {
                    context.save()
                    context.translate(300, 300)
                    context.rotate(i * (Math.PI / 30))
                    context.lineWidth = 0.5
                    context.moveTo(0, -200)
                    context.lineTo(0, -192)
                    context.strokeStyle = 'gray'
                    context.stroke()
                    context.restore()
                }
                // 获取时间
                var time = new Date()
                hour = time.getHours()
                min = time.getMinutes()
                console.log(min);
                sec = time.getSeconds()
                // 时针
                context.save()
                context.beginPath()
                context.translate(300, 300)
                context.rotate(hour * Math.PI / 6)//位置?
                context.moveTo(0, 0)
                context.lineTo(0, -100)
                context.lineWidth = 4
                context.strokeStyle = 'gray'
                context.stroke()
                //把旋转角度归零，让分针的旋转角度=min*Math.PI/30
                context.restore()
                // context.closePath()
                // 分针
                context.save()
                context.beginPath()
                context.translate(300, 300)
                context.rotate(min * Math.PI / 30)//位置?
                context.moveTo(0, 0)
                context.lineTo(0, -140)
                context.lineWidth = 2
                context.strokeStyle = 'gray'
                context.stroke()
                context.restore()
                // 秒针
                context.save()
                context.beginPath()
                context.translate(300, 300)
                context.rotate(sec * Math.PI / 30)//位置?
                context.moveTo(0, 15)
                context.lineTo(0, -170)
                context.lineWidth = 1
                context.strokeStyle = 'red'
                context.stroke()
                context.restore()
                // 中心小圆
                context.beginPath()
                context.arc(300, 300, 5, 0, Math.PI * 2)
                context.fillStyle = 'gray'
                context.fill()
                context.strokeStyle = 'red'
                context.stroke()
                context.closePath()
            }, 1000)
        }
    </script>
</head>

<body>
    <canvas width="600px" height="600px"></canvas>
</body>

</html>

效果如下：