canvas实现时钟

最新推荐文章于 2024-08-15 17:26:23 发布

Carzy man

最新推荐文章于 2024-08-15 17:26:23 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/ab_15/article/details/124269901

版权

前端

<!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 {
            border: 1px solid red;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500" id="canvas"></canvas>
</body>

<script>
    //画圆
    let mc = canvas.getContext('2d')
    let date = new Date()
    let h = date.getHours()
    h = h > 12 ? h - 12 : h
    let m = date.getMinutes()
    let s = date.getSeconds()




    mc.translate(250, 250)
    mc.save()
    mc.beginPath()
    mc.lineWidth = 5
    mc.strokeStyle = 'pink'
    mc.arc(0, 0, 5, 0, Math.PI * 2, false)
    mc.fill()
    mc.stroke()
    mc.closePath()
    mc.restore()

    function timer() {

        mc.clearRect(-250, -250, 500, 500)
        mc.save()
        mc.beginPath()
        mc.rotate(Math.PI / 180)
        mc.lineWidth = 5
        mc.strokeStyle = 'red'
        mc.arc(0, 0, 200, 0, Math.PI * 2, false)
        mc.stroke()
        mc.closePath()
        mc.restore()
        s++


        mc.save()
        //分针
        mc.rotate(6 * m * deg + (6 / 60) * s * deg + (-90) * deg)
        mc.beginPath()
        mc.lineWidth = '3'
        mc.strokeStyle = 'gold'
        mc.moveTo(0, 0)
        mc.lineTo(120, 0)
        mc.stroke()
        mc.restore()
        mc.closePath()


        mc.save()
        //时针
        mc.beginPath()
        mc.rotate(30 * h * deg + (30 / 60) * m * deg + (-90) * deg)
        mc.lineWidth = '5'
        mc.strokeStyle = 'red'
        mc.moveTo(0, 0)
        mc.lineTo(80, 0)
        mc.stroke()
        mc.restore()
        mc.closePath()


        //秒针
        mc.save()
        mc.rotate(6 * s * deg + (-200) * deg)
        mc.beginPath()
        mc.lineWidth = '2'
        mc.strokeStyle = 'pink'
        mc.moveTo(0, 0)
        mc.lineTo(150, 0)
        mc.stroke()
        mc.restore()
        mc.closePath()
        mc.font = '25px 宋体'

        mc.fillText('12', -10, -180)
        mc.fillText('1', 90, -150)
        mc.fillText('2', 160, -90)
        mc.fillText('3', 180, 10)
        mc.fillText('4', 150, 100)
        mc.fillText('5', 85, 170)
        mc.fillText('6', 0, 200)
        mc.fillText('7', -100, 170)
        mc.fillText('8', -160, 100)
        mc.fillText('9', -200, 10)
        mc.fillText('10', -160, -80)
        mc.fillText('11', -100, -150)

        for (let i = 0; i < 12; i++) {
            mc.beginPath()
            mc.rotate(30 * deg)
            mc.lineWidth = 3
            mc.strokeStyle = 'blue'
            mc.moveTo(200, 0)
            mc.lineTo(170, 0)
            mc.stroke()
            mc.fill()
            mc.closePath()
        }
        for (let i = 0; i < 60; i++) {
            mc.beginPath()
            mc.rotate(6 * deg)
            mc.lineWidth = 2
            mc.strokeStyle = 'green'
            mc.moveTo(180, 0)
            mc.lineTo(200, 0)
            mc.stroke()
            mc.closePath()
        }
    }
    let deg = Math.PI / 180
    // mc.translate(200, 200)

    timer()
    mc.rotate(-90 * deg)
    setInterval(timer, 1000)
    mc.rotate(90 * deg)
</script>

</html>