》》canvas时钟

最新推荐文章于 2025-05-26 17:52:29 发布
weixin_33827731
最新推荐文章于 2025-05-26 17:52:29 发布
阅读量40
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/1007573044qqcom/p/7991046.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CANVAS时钟</title>
        <style>
        div{
            margin: 0 auto;
            width:500px;
            height: 500px;
        }
            body{
                /*background: url(img/u0.jpg) no-repeat center;
                -webkit-background-size: cover;
                background-size: cover;*/
            }
            
            +
        </style>
        
    </head>
    <body>
        <div>    
            <img src="img/u0.jpg" style="display: none;">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>

        
    </body>
    <script>
        var canvas=document.getElementById("canvas");
        var cxt=canvas.getContext("2d");
        
        function clock(){
            
            
            var date=new Date();
            var hour=date.getHours();
            var min=date.getMinutes();
            var sec=date.getSeconds();
            hour=hour>24?hour-12:hour;
            min=min<10?"0"+min:min;
            sec=sec<10?"0"+sec:sec;
            cxt.clearRect(0,0,canvas.width,canvas.height);
        
            //圆
            cxt.strokeStyle="#00ffff";
            cxt.lineWidth=1;
            cxt.beginPath();
            cxt.arc(250,250,200,0,2*Math.PI,true);
            var img=new Image();
            img.src="img/h.jpg";
            
            cxt.clip();
            cxt.drawImage(img,0,0,500,500);
            cxt.stroke();
            cxt.restore();
            cxt.save();
            cxt.translate(250,250);
            cxt.strokeStyle="fuchsia";
            cxt.lineWidth=7;
            //画时针
            for (var i=0;i<12;i++) {
            cxt.rotate(30*Math.PI/180);    
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-175);
            cxt.closePath();
            cxt.stroke();
            }
            cxt.restore();
            cxt.save();
            cxt.translate(250,250);
            cxt.strokeStyle="#ffff00";
            cxt.lineWidth=5;
            //分针
            for (var i=0;i<60;i++) {
            cxt.rotate(6*Math.PI/180);    
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
                    
            }
            //时针
            cxt.restore();
            cxt.save();
            cxt.lineWidth=7;
            cxt.strokeStyle="mediumorchid";
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-130);
            cxt.lineTo(0,10);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //分针
            cxt.save();
            cxt.lineWidth=5;
            cxt.strokeStyle="#fff00";
            cxt.translate(250,250);
            cxt.rotate(min*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-150);
            cxt.lineTo(0,10);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //秒针
            cxt.save();
            cxt.lineWidth=3;
            cxt.strokeStyle="#ff0000";
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,10);
            cxt.closePath();
            cxt.stroke();
            
            cxt.beginPath();
            cxt.arc(0,0,7,0,2*Math.PI,true);
            cxt.closePath();
            cxt.strokeStyle="ff0000";
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.stroke();
            
            cxt.beginPath();
            cxt.arc(0,-140,7,0,2*Math.PI,true);
            cxt.closePath();
            cxt.strokeStyle="ff0000";
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.stroke();
            cxt.restore();
            
            cxt.save();
             cxt.beginPath();
         var time = hour+":"+min+":"+sec;
         cxt.font="18px 微软雅黑";
         cxt.textAlign="center";
         cxt.fillStyle="darkorchid";
         cxt.fillText(time,250,400);
        cxt.restore();
        
        }
        
        clock();
        
        setInterval(clock,1000);
        
    </script>
</html>