canvas绘制炫酷时钟

最新推荐文章于 2021-10-04 19:11:40 发布

也许丶曾经

最新推荐文章于 2021-10-04 19:11:40 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/weixin_43967169/article/details/116912372

版权

canvas绘制炫酷时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            display: block;
        }
        body{
            background: white;
        }
    </style>
</head>
<body>
    <canvas width="500px" height="500px" style="background-color: yellowgreen;"></canvas>
</body>
<script>
    var canvas=document.querySelector("canvas");
    var cantext=canvas.getContext("2d")
    
        function text() {
                var now = new Date()
                var second1 = now.getSeconds()
                var minute = now.getMinutes()
                var hour1 = now.getHours()
                var haom= now.getMilliseconds()
                var second= second1+haom/1000;
                var hour = hour1 + minute / 60;
                hour = hour > 12 ? hour - 12 : hour;
                // 获取全部时间
                var time = now.toLocaleString()

                // 时针
                cantext.shadowColor=" red"
                cantext.shadowOffsetX="10"
                cantext.shadowOffsetY="10"
                cantext.shadowBlur="10"
                cantext.lineWidth = 20; 
                cantext.strokeStyle = " rgb(112, 234, 255)"
                cantext.beginPath()
                cantext.arc(250,250,100,Math.PI*3/2,hour*30*Math.PI/180-Math.PI/2)
                cantext.stroke()


                // 分针
                cantext.lineWidth = 15;
                cantext.strokeStyle = " rgb(112, 234, 255)"
                cantext.beginPath()
                cantext.arc(250,250,150,Math.PI*3/2,minute*6*Math.PI/180-Math.PI/2)
                cantext.stroke()


                // 秒针
                cantext.lineWidth = 10;
                cantext.strokeStyle = " rgb(112, 234, 255)"
                cantext.beginPath()
                cantext.arc(250,250,200,Math.PI*3/2,second*6*Math.PI/180-Math.PI/2)
                cantext.stroke()

                // //时间
                // cantext.fillStyle=" white"
                // // cantext.font="12px 黑体"
                // cantext.fillText(time,185,250)
            }
            setInterval(function () {
                canvas.height = canvas.height
                    text()
                },1)

</script>
</html>