js画一个随着系统时间变动的钟表

最新推荐文章于 2021-04-27 17:19:33 发布

我是大头鸟

最新推荐文章于 2021-04-27 17:19:33 发布

阅读量932

点赞数

分类专栏： javaScript 文章标签： javascript canvas

本文链接：https://blog.csdn.net/datouniao1/article/details/52106336

版权

javaScript 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style>
        body{
            background: darkgray;
        }
        #c1
        {
            background: yellow;
            position: absolute;
            left:300px;
            top:100px;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var timer=null;
            timer=setInterval(function(){
            var oC=document.getElementById("c1");
            var oGc=oC.getContext("2d");
            oGc.beginPath();
//            oGc.lineWidth=8;
            for(var i=1;i<=60;i++) {
                oGc.moveTo(200, 200);
                oGc.strokeStyle="black";
                oGc.lineWidth=3;
                oGc.arc(200, 200, 145, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);

            }
            oGc.closePath();
            oGc.stroke();
            oGc.beginPath();
            oGc.fillStyle='yellow';
            oGc.moveTo(200,200);
            oGc.arc(200, 200, 138, 0, 360* Math.PI / 180, false);
           // oGc.strokeStyle="yellow";
            //oGc.stroke();//有的时候需要的仅仅是覆盖，并不需要进行troke，仅仅是画个圆就行了
            oGc.closePath();
            oGc.fill();
            oGc.beginPath();
            for(var j=1;j<=12;j++) {
                oGc.moveTo(200, 200);
                oGc.arc(200.5, 200.5, 145, 30*j * Math.PI / 180, 30*(j+1) * Math.PI / 180, false);
                oGc.stroke();
            }
            oGc.closePath();
            oGc.beginPath();
            oGc.fillStyle="yellow";
            oGc.strokeStyle="yellow";
            oGc.arc(200,200,134,0,360*Math.PI/180,false);
            oGc.stroke();
            oGc.fill();
            oGc.closePath();
//            画时针

                var date=new Date();

            var Hour=date.getHours();
            var Mint=date.getMinutes();
            var sec=date.getSeconds();
            var cH= (Hour*30-90+Mint/2)*Math.PI/180;
            var cM= (Mint*6-90)*Math.PI/180;
            var cS=(sec*6-90)*Math.PI/180;


            oGc.save()
            oGc.beginPath();
            oGc.lineWidth=6;
            oGc.strokeStyle="red";
            oGc.moveTo(200,200);
            oGc.arc(200,200,60,cH,cH,false);
            oGc.closePath();
            oGc.stroke();
            oGc.restore();

            oGc.save()
            oGc.beginPath();
            oGc.lineWidth=4;
            oGc.strokeStyle="black";
            oGc.moveTo(200,200);
            oGc.arc(200,200,80,cM,cM,false);
            oGc.closePath();
            oGc.stroke();
            oGc.restore();

                oGc.save();
            oGc.beginPath();
            oGc.lineWidth=2;
            oGc.strokeStyle="black";
            oGc.moveTo(200,200);
            oGc.arc(200.5,200.5,100,cS,cS,false);
            oGc.closePath();
            oGc.stroke();
            oGc.restore();
            },1000);

        }
    </script>
</head>
<body>
<canvas id="c1" width="400" height="400">

</canvas>

</body>
</html>

我是大头鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js画一个随着系统时间变动的钟表

clock body{ background: darkgray; } #c1 { background: yellow; position: absolute; left:300px; top:100px
复制链接

扫一扫

专栏目录