canvas时钟

效果图

<!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>
</head>

<body>
    <canvas id="canvas" width="600" height="600">
        您的浏览器不支持canvas，请更换谷歌浏览器
    </canvas>
    <script>
        let num = 0
        let scale = 0
        if (canvas.getContext) {
            canvas.style.backgroundColor = 'orange'
            const ctx = canvas.getContext("2d")
            document.title = "时钟"
            // 移动canvas圆点位置
            ctx.translate(300, 300)
            ctx.rotate(-90 * Math.PI / 180)
            setInterval(draw, 1000);
            // draw()
            function draw() {
                ctx.clearRect(-300, -300, canvas.width, canvas.height)
                // 外圆
                ctx.beginPath()
                ctx.save()
                ctx.lineWidth = 10
                ctx.arc(0, 0, 150, 0, 2 * Math.PI)
                ctx.stroke()
                ctx.restore()

                // 12时
                ctx.beginPath()
                ctx.save()
                ctx.lineWidth = 8
                ctx.lineCap = 'round'
                for (let i = 0; i < 12; i++) {
                    ctx.moveTo(120, 0)
                    ctx.lineTo(135, 0)
                    ctx.rotate(30 * Math.PI / 180)
                }
                ctx.stroke()
                ctx.restore()
                // 60分
                ctx.beginPath()
                ctx.save()
                ctx.lineCap = 'round'
                for (let i = 0; i < 60; i++) {
                    ctx.moveTo(125, 0)
                    ctx.lineTo(135, 0)
                    ctx.rotate(6 * Math.PI / 180)
                }
                ctx.stroke()
                ctx.restore()
                // 当前时间
                const date = new Date()
                const h = date.getHours() > 12 ? date.getHours() - 12 : date.getHours()
                const m = date.getMinutes()
                const s = date.getSeconds()
                // 时
                ctx.beginPath()
                ctx.save()
                ctx.lineWidth = 8
                ctx.lineCap = 'round'
                ctx.rotate(h * 30 * Math.PI / 180)
                ctx.translate(-10, 0)
                ctx.moveTo(0, 0)
                ctx.lineTo(60, 0)
                ctx.stroke()
                ctx.restore()
                // 分
                ctx.beginPath()
                ctx.save()
                ctx.lineWidth = 5
                ctx.lineCap = 'round'
                ctx.rotate(m * 6 * Math.PI / 180)
                ctx.translate(-15, 0)
                ctx.moveTo(0, 0)
                ctx.lineTo(75, 0)
                ctx.stroke()
                ctx.restore()

                // 秒
                ctx.beginPath()
                ctx.save()
                ctx.lineWidth = 2
                ctx.lineCap = 'round'
                ctx.strokeStyle = 'red'
                ctx.rotate(s * 6 * Math.PI / 180)
                ctx.translate(-20, 0)
                ctx.moveTo(0, 0)
                ctx.lineTo(100, 0)
                ctx.stroke()
                ctx.restore()
                // 盖帽
                ctx.beginPath()
                ctx.save()
                ctx.arc(0, 0, 10, 0, 2 * Math.PI)
                ctx.fillStyle = 'red'
                ctx.fill()
                ctx.restore()
            }
        }
    </script>
</body>

</html>
posted @ 2021-11-26 20:58  走我们钓鱼去  阅读(33)  评论(0)    收藏  举报