利用canvas画一个时钟

最新推荐文章于 2024-11-14 15:33:48 发布

可还记得你我的誓言

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量1.5k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/u013231970/article/details/130888718

版权

利用canvas画一个时钟

详细步骤

画中心圆点和刻度线
画时针
画分针
画秒针

下面是整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas style="border: solid 1px" id="canvas" height="100" width="100"></canvas>
<script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // 绘制时钟：
    function draw() {
        // 获取当前时间：
        const date = new Date()
        let hour = date.getHours()
        let second = date.getSeconds()
        let minute = date.getMinutes()

        // 每次循环都要先清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        let x = canvas.width / 2
        let y = canvas.height / 2
        let radius = canvas.height / 2

        // 绘制表盘和中心点
        ctx.beginPath()
        ctx.arc(x, y, radius, 0, [(Math.PI) / 180] * 360)
        ctx.stroke()
        ctx.beginPath()
        ctx.arc(x, y, 5, 0, [(Math.PI) / 180] * 360)
        ctx.fill()

        // 绘制时刻线
        ctx.save();   //保存初始状态，原点(0,0)
        ctx.translate(x, y) // 重新映射画布上的 (0,0) 位置为新的位置(x,y)
        for (let i = 0; i < 60; i++) {
            ctx.save()
            ctx.beginPath()
            ctx.rotate([(Math.PI) / 180] * 6 * i)
            ctx.moveTo(0, -radius + 10)
            ctx.lineTo(0, -radius)
            // 当刻度为5的整数倍的时候，加粗：
            if (i % 5 === 0) {
                // 让时间刻度为5的倍数的刻度加粗：
                ctx.lineWidth = 5
                // 绘制时钟上的数字
                ctx.save()
                ctx.translate(0, -radius + 20)
                ctx.rotate([-(Math.PI / 180)] * 6 * i)
                ctx.font = '12px s'
                ctx.textAlign = 'center'
                ctx.textBaseline = 'middle'
                ctx.fillStyle = '#265cd2'
                ctx.fillText(`${i / 5 === 0 ? 12 : i / 5}`, 0, 0, 20) // 绘制出1-12刻度文字
                ctx.restore()
            }
            ctx.strokeStyle = 'rgb(255,106,0)'
            ctx.stroke()
            ctx.restore()
        }
        ctx.restore()

        // 画时针
        ctx.save()
        ctx.translate(x, y)
        //时针的角度等于整时的角度+已走分钟的角度+已走秒针的角度
        ctx.rotate([hour * (Math.PI) / 180] * 30) // 一个小时转30°=360/12
        ctx.rotate([minute * (Math.PI) / 180] * 0.5) // 一分钟转0.5°=30/60
        ctx.rotate([second * (Math.PI) / 180] / 120) // 一分钟转1/120=30/60/60
        // 或合并成一个语句 ctx.rotate(hour * (Math.PI / 6) + minute * (Math.PI / 360) + second * (Math.PI / 21600));
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -radius / 2)
        ctx.lineWidth = 4
        ctx.stroke()
        ctx.restore()

        // 画分针
        ctx.save()
        ctx.translate(x, y)
        ctx.translate(0, 0)
        ctx.rotate((Math.PI) * 2 * minute / 60) // 换算分针的旋转角度
        ctx.rotate([(Math.PI) / 180] * second / 10) // 换算分针的旋转角度
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -radius / 3 * 2)
        ctx.lineWidth = 4
        ctx.strokeStyle = 'black'
        ctx.stroke()
        ctx.restore()

        // 画秒针
        ctx.save()
        ctx.translate(x, y)
        ctx.translate(0, 0)
        ctx.rotate([(Math.PI) / 180] * second * 6) // 60秒走360°,一秒走6°
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -radius + 10)
        ctx.strokeStyle = '#ff0000'
        ctx.stroke()
        ctx.restore()

        window.requestAnimationFrame(draw)
    }

    window.requestAnimationFrame(draw)
</script>
</body>

</html>