用canvas画一个钟表

最新推荐文章于 2023-10-26 08:47:56 发布

十年挂南墙

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量693

点赞数

分类专栏： HHTML5

本文链接：https://blog.csdn.net/u012059921/article/details/50385965

版权

HHTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{background:#000;}
        #c1{background-color: #fff;}
    </style>
    <script>
        window.οnlοad=function(){
            var oC=document.getElementById('c1');
            var oGc=oC.getContext('2d');


            function toDraw(){

                var x=200;
                var y=200;
                var r=150;
                oGc.clearRect(0,0,oGc.width,oGc.height);

                var oDate=new Date();
                var oHours=oDate.getHours();
                var oMin=oDate.getMinutes();
                var oSen=oDate.getSeconds();


                var oHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;
                var oMinsValue=(-90+oMin*6)*Math.PI/180;
                var oSenValue=(-90+oSen*6)*Math.PI/180;

                oGc.beginPath();
                for(var i=0;i<60;i++){
                    oGc.moveTo(x,y);
                    oGc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
                }
                oGc.closePath();
                oGc.stroke();

                oGc.fillStyle='white';
                oGc.beginPath();
                oGc.closePath();
                oGc.moveTo(x,y);
                oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
                oGc.fill();



                oGc.lineWidth=3;
                oGc.beginPath();
                for(var i=0;i<12;i++){
                    oGc.moveTo(x,y);
                    oGc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
                }
                oGc.closePath();
                oGc.stroke();

                oGc.fillStyle='white';
                oGc.beginPath();
                oGc.closePath();
                oGc.moveTo(x,y);
                oGc.arc(x,y,r*18/20,0,360*Math.PI/180,false);
                oGc.fill();

                oGc.lineWidth=5;
                oGc.beginPath();
                oGc.moveTo(x,y);
                oGc.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
                oGc.closePath();
                oGc.stroke();

                oGc.lineWidth=3;
                oGc.beginPath();
                oGc.moveTo(x,y);
                oGc.arc(x,y,r*14/20,oMinsValue,oMinsValue,false);
                oGc.closePath();
                oGc.stroke();

                oGc.lineWidth=1;
                oGc.beginPath();
                oGc.moveTo(x,y);
                oGc.arc(x,y,r*19/20,oSenValue,oSenValue,false);
                oGc.closePath();
                oGc.stroke();


            }

            setInterval(toDraw,1000);
            toDraw();
        }
    </script>

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

十年挂南墙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas画一个钟表

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> body{background:#000;} #c1{background-color: #fff;} style> script> window.onload=funct
复制链接

扫一扫