花里胡哨的canvas时钟_canvas的花哨特效-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46073353/article/details/116947607
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="500" height="500" style="background-color: black;"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext("2d");
        //创建canvas画布，创建2d画笔
        function s() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            //获取当前时间，小时，分钟，秒钟，毫秒；并对获取的小时进行处理，将其二十四转换为12小时制
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var seconds = time.getMilliseconds();
            var r = Math.floor(Math.random()*256);
            //随机获取红色、蓝色、绿色及透明度
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = seconds * Math.PI / 180/1000 * 6 + Math.PI / 180 * 270 +second * Math.PI / 180*6;
            //获取当前时间所对应圆的弧度值
            context.beginPath();
            //开始创建
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            //填充颜色
            context.lineWidth = 20;
            //设置宽度
            context.arc(250, 250, 200, Math.PI / 2 * 3, x);
            //绘制圆
            context.stroke();
            //颜色填充
        }

        function m() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var seconds = time.getMilliseconds();
            var r = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = minute * Math.PI / 160 * 6 + Math.PI / 180 * 270 + second*Math.PI/180/10;
            context.beginPath();
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            context.lineWidth = 20;
            context.arc(250, 250, 160, Math.PI / 2 * 3, x);
            context.stroke();
        }

        function h() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var r = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = hour * Math.PI / 180 * 30 + minute * Math.PI / 180 / 2 + Math.PI / 180 * 270;
            context.beginPath();
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            context.lineWidth = 20;
            context.arc(250, 250, 120, Math.PI / 2 * 3, x);
            context.stroke();
        }

        function data() {
            context.clearRect(0,0,500,500)
            var time = new Date();
            var thistime = time.toLocaleString();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            context.font = "12px 宋体";
            //设置字体样式
            context.fillStyle = "#fff";
            //设置填充色
            context.fillText(thistime, 200, 250)
        }
        var timer = setInterval(function () {
            data();
            s();
            m();
            h();
            
        }, 1)
    </script>
</body>

</html>