canvas 画布绘制时钟

最新推荐文章于 2022-08-31 09:09:50 发布

周家大小姐.

最新推荐文章于 2022-08-31 09:09:50 发布

阅读量357

点赞数

分类专栏： canvas 文章标签：前端

本文链接：https://blog.csdn.net/qq_40190624/article/details/126212458

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<!--
 * @Author: 164591357@qq.com 164591357@qq.com
 * @Date: 2022-08-06 11:04:07
 * @LastEditors: 164591357@qq.com 164591357@qq.com
 * @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>