canvas实现动态闹钟

最新推荐文章于 2024-08-01 16:15:33 发布

我要去看得最远的地方

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量328

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_42434171/article/details/105290625

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>动态闹钟</title>
</head>
<body>
    <canvas id=mycanvas width=800px height=800px style="background:white"></canvas>
    <script>
        var cav=document.getElementById("mycanvas");
        var cxt=cav.getContext("2d");

        function drawclock(){
            cxt.clearRect(0, 0, 800, 800)
        var now=new Date();
        hour=now.getHours();
        sec=now.getSeconds();
        min=now.getMinutes();
        hour=hour+min/60+sec/3600;
        min=min+sec/3600;
        hour=hour>12?hour-12:hour;
        cxt.beginPath();
        cxt.arc(400,400,300,0,2*Math.PI,false);
        cxt.strokeStyle='rgb(0,0,0)'
        cxt.stroke();
        cxt.closePath();

        var endTime=new Date("2020/12/19 00:00:00")
        var second=parseInt((endTime.getTime()-now.getTime())/1000)
        var date=parseInt(second/3600/24);
         cxt.beginPath()
         cxt.fillStyle='red'
        cxt.font="30px 楷体"
     //   cxt.fillstyle='red';
        cxt.fillText("距2021年考研还剩: "+date+"天 ",250,500)
        cxt.fillStyle='black'
      cxt.closePath()
     /*  cxt.fillStyle='red'
    cxt.font="20px 楷体"
    cxt.fillText("距2021年考研还剩: "+date+"天 ",250,500)*/

       for(var i=0;i<12;i++)
       {
        cxt.beginPath();
        cxt.save();
        cxt.translate(400,400);
         cxt.rotate(i*30*Math.PI/180);
        cxt.fillRect(0,-300,3,20);
        cxt.strokeStyle='black';
        cxt.stroke();
        cxt.restore();
        cxt.closePath();
        }
        for(var i=0;i<60;i++)
        {
            cxt.beginPath();
            cxt.save();
            cxt.translate(400,400);
            cxt.rotate(i*6*Math.PI/180);
            cxt.fillRect(0,-300,1,10);
            cxt.strokeStyle='black';
            cxt.stroke();
            cxt.restore();
            cxt.closePath();
        }
        //分针
        cxt.beginPath();
        cxt.save();
        cxt.translate(400,400);
        cxt.rotate(min*6*Math.PI/180);
        cxt.fillRect(-4,-230,8,265);
        cxt.strokeStyle='black';
        cxt.stroke();
        cxt.restore();
        cxt.closePath();
        //时针
        cxt.beginPath();
        cxt.save();
        cxt.translate(400,400);
        cxt.rotate(hour*30*Math.PI/180);
        cxt.fillRect(-5,-150,10,185);
        cxt.strokeStyle='black';
        cxt.stroke();
        cxt.restore();
        cxt.closePath();
        //秒针
        cxt.beginPath();
        cxt.save();
        cxt.translate(400,400);
        cxt.rotate(6*sec*Math.PI/180);
        cxt.fillRect(-1,-200,2,240)
        cxt.strokeStyel='black'
        cxt.restore()
        cxt.closePath();

        cxt.beginPath();
        cxt.arc(400,400,12,0,2*Math.PI,false);
        cxt.fillStyle='black';
        cxt.fill();
        cxt.stroke();
        cxt.closePath();
        //添加数字
        //
        for(var i=12;i>=1;i--)
        {
            cxt.beginPath();
            cxt.save();
            cxt.translate(400,400);
           // cxt.rotate(-(12-i)*30*Math.PI/180)
            cxt.font="60px 楷体 black";
            if(i>=6)
            cxt.fillText(i,250*Math.cos((90+(12-i)*30)*Math.PI/180)-25,-250*Math.sin((90+(12-i)*30)*Math.PI/180)+20);
        else{
            cxt.fillText(i,250*Math.cos((90+(12-i)*30)*Math.PI/180)-3,-250*Math.sin((90+(12-i)*30)*Math.PI/180)+20);

        }
            cxt.restore();
            cxt.closePath();


        }

         }

        setInterval(drawclock,1000)

    </script>

</body>
</html>