用canvas画一个钟表

Posted 2020-06-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用canvas画一个钟表相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{background:#000;}
        #c1{background-color: #fff;}
    </style>
    <script>
        window.onload=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>

以上是关于用canvas画一个钟表的主要内容，如果未能解决你的问题，请参考以下文章