首页 > 代码库 > html5--canvas绘制简单的时钟

html5--canvas绘制简单的时钟

2024-08-30 17:32:21   218人阅读

http://5227788.cn/static/time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById(‘c1‘);
        var oGC=oC.getContext(‘2d‘);
        
        setInterval(toDraw,1000);    
    function toDraw(){
        var x=200;
        var y=200;
        var r=150;
        

        

            oGC.clearRect(0, 0, oC.width,oC.height);
        var oDte=new Date();
        var oHours=oDte.getHours();
        var oMin=oDte.getMinutes();
        var oSen=oDte.getSeconds();

            var oHoursValue=http://www.mamicode.com/(-90+oHours*30+oMin/2)*Math.PI/180;
            var oMinValue=http://www.mamicode.com/(-90+oMin*6)*Math.PI/180;"color: #0000ff">var oSenValue=http://www.mamicode.com/(-90+oSen*6)*Math.PI/180;"color: #000000">           
          



          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.moveTo(x,y);
        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
        oGC.closePath();
        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.moveTo(x,y);
        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();
         oGC.lineWidth=3;  
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*9/20,oMinValue,oMinValue,false);
        oGC.closePath();
        oGC.stroke();

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

        oGC.lineWidth=4;  
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*6/20,oHoursValue,oHoursValue,false);

        oGC.closePath();
        oGC.stroke();
         
     }
    
    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

 

html5--canvas绘制简单的时钟


联系
我们