[email protected] [email protected] / @Date: 2022 0...">

当前位置：网站首页>canvas 画布绘制时钟

canvas 画布绘制时钟

2022-08-10 04:34:00 【周家大小姐.】

利用canvas绘制时钟的一个小demo 

 

<!--
 * @Author: [email protected] [email protected]
 * @Date: 2022-08-06 11:04:07
 * @LastEditors: [email protected] [email protected]
 * @LastEditTime: 2022-08-07 15:56:21
 * @FilePath: \canvas\clock-canvas.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<!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>时钟</title>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>

    <script type="text/javascript">
        let canvas = document.querySelector('#canvas')
        let cxt = canvas.getContext('2d')
        function renderClock () {
            cxt.clearRect(0, 0, 800, 600)//清除画布
            // 使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
            cxt.save()//保留画笔之前状态
            // 将坐标移动到画布的中央
            cxt.translate(400, 300)
            cxt.rotate(-2 * Math.PI / 4)//旋转90度让起始角，由原来的（弧的圆形的三点钟位置是 0 度）改为12点位置
            cxt.save()
            /**
             * cxt.arc参数说明
             * x 坐标
             * 圆的中心的 y 坐标。
             * 圆的半径。
             * 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
             * 结束角，以弧度计。
             * 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
            */
            // 创建圆绘制表盘
            cxt.beginPath()//开始路径
            cxt.arc(0, 0, 200, 0, 2 * Math.PI)
            cxt.strokeStyle = "darkgrey"
            cxt.lineWidth = 10//圆的边宽
            cxt.stroke()//实际地绘制出路径。默认颜色是黑色。
            cxt.closePath()//结束路径再画刻度;不然会和圆粘在一起

            //分钟
            for (let j = 0; j < 60; j++) {
                cxt.rotate(Math.PI / 30)// 转6度
                cxt.beginPath()
                cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
                cxt.lineTo(190, 0)
                cxt.lineWidth = '2'
                cxt.strokeStyle = "orangered"
                cxt.stroke()
                cxt.closePath()
            }
            cxt.restore()
            cxt.save()
            // 绘制小时刻度
            for (let i = 0; i < 12; i++) {
                cxt.rotate(Math.PI / 6)//每次旋转30度
                cxt.beginPath()
                cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
                cxt.lineTo(200, 0)
                cxt.lineWidth = 8//圆的边宽
                cxt.strokeStyle = "darkgrey"
                cxt.stroke()
                cxt.closePath()
            }
            // 时间
            let time = new Date()
            let H = time.getHours()
            let M = time.getMinutes()
            let S = time.getSeconds()
            // 如果时间大于12就直接减去12 (如:当前为17点;那就是17-13=5点)
            H = H > 12 ? H - 12 : H
            console.log('当前小时', H + ':' + M + ':' + S);

            cxt.beginPath()
            // 绘制秒针
            cxt.rotate(2 * Math.PI / 60 * S)//每秒旋转的刻度乘以秒
            cxt.moveTo(-30, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
            cxt.lineTo(170, 0)
            cxt.lineWidth = 2//圆的边宽
            cxt.strokeStyle = "red"
            cxt.stroke()
            cxt.closePath()

            cxt.restore()
            cxt.save()
            // 绘制分针
            cxt.beginPath()
            cxt.rotate(2 * Math.PI / 60 * M + 2 * Math.PI / 3600 * S)//每分针一圈360为一圈,一圈有60分钟所以要除以60再乘以分钟得到旋转的角度,加上3600秒为一小时
            cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
            cxt.lineTo(140, 0)
            cxt.lineWidth = 4//圆的边宽
            cxt.strokeStyle = "darkblue"
            cxt.stroke()
            cxt.closePath()
            cxt.restore()
            cxt.save()

            // 绘制小时
            cxt.beginPath()
            cxt.rotate(2 * Math.PI / 12 * H + 2 * Math.PI / 60 / 12 * M + 2 * Math.PI / 12 / 60 / 60 * S)//一小时有12刻度,乘以当间小时+分钟(一圈360度/60分钟/12小时乘以当前的分钟)+秒的算法最后得到每小时走的角度
            cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
            cxt.lineTo(100, 0)
            cxt.lineWidth = 6//圆的边宽
            cxt.strokeStyle = "darkslategray"


            cxt.beginPath()
            // 指针中心的小圆
            cxt.arc(0, 0, 8, 0, 2 * Math.PI)
            cxt.fillStyle = "deepskyblue"
            cxt.fill()
            cxt.restore()
            cxt.restore()//恢复到初始状态

        }
        setInterval(() => {
            renderClock()
        }, 1000);


    </script>
</body>

</html>

原网站

版权声明
本文为[周家大小姐.]所创，转载请带上原文链接，感谢
https://zhouyunfang.blog.csdn.net/article/details/126212458

边栏推荐

猜你喜欢

随机推荐