使用Canvas画一个时钟

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800px" height="600px"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')

        function render() {
            // 清空指定区域
            ctx.clearRect(0, 0, 800, 600)
                // 报错画布状态
            ctx.save()


            // 改变坐标原点
            ctx.translate(400, 300)
            ctx.rotate(-Math.PI / 2)
            ctx.save()

            // 绘制表盘
            ctx.beginPath()
                // 画圆
            ctx.arc(0, 0, 200, 0, 2 * Math.PI)
            ctx.strokeStyle = 'skyblue'
            ctx.lineWidth = 8
                // 描边
            ctx.stroke()
            ctx.closePath()

            // 绘制时钟刻度
            for (let i = 0; i < 12; i++) {

                ctx.rotate(Math.PI / 6)

                ctx.beginPath()
                    // 起点坐标
                ctx.moveTo(180, 0)
                    // 经过的某个坐标
                ctx.lineTo(200, 0)
                ctx.lineWidth = 4
                ctx.stroke()
                ctx.closePath()
            }
            ctx.restore()
            ctx.save()

            // 绘制分钟刻度
            for (let i = 0; i < 60; i++) {

                ctx.rotate(Math.PI / 30)
                ctx.beginPath()
                ctx.moveTo(190, 0)
                ctx.lineTo(200, 0)
                ctx.lineWidth = 4
                ctx.strokeStyle = 'skyblue'
                ctx.stroke()
                ctx.closePath()
            }

            ctx.restore()
            ctx.save()

            // 获取时间
            var time = new Date()
            var h = time.getHours()
            var m = time.getMinutes()
            var s = time.getSeconds()

            if (h > 12) h = h - 12

            // console.log(h + ':' + m + ':' + s);


            // 绘制秒针
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 60 * s)
            ctx.moveTo(-30, 0)
            ctx.lineTo(160, 0)
            ctx.lineWidth = 2
            ctx.strokeStyle = '#48d69d'
            ctx.stroke()
            ctx.closePath()


            ctx.restore()
            ctx.save()

            // 绘制分针
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 3600 * s)
            ctx.moveTo(-20, 0)
            ctx.lineTo(140, 0)
            ctx.lineWidth = 4
            ctx.strokeStyle = '#ffd664'
            ctx.stroke()
            ctx.closePath()


            ctx.restore()
            ctx.save()

            // 绘制时针
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 12 * h + 2 * Math.PI / 60 / 12 * m)
            ctx.moveTo(-20, 0)
            ctx.lineTo(100, 0)
            ctx.lineWidth = 4
            ctx.strokeStyle = '#53c2ff'
            ctx.stroke()
            ctx.closePath()


            // 小圆盘
            ctx.beginPath()
            ctx.arc(0, 0, 10, 0, 2 * Math.PI)
            ctx.fillStyle = '#ff8300'
            ctx.fill()
            ctx.closePath()

            ctx.restore()
            ctx.restore()
        }


        setInterval(() => {
            render()
        }, 1000);
    </script>
</body>

</html>
使用Canvas画一个时钟

使用Canvas画一个时钟

悦读
