zoukankan      html  css  js  c++  java
  • 用canvas绘制一个时钟

     

    实现一个时钟的绘制和时间的显示

    一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }
    
      //显示时间画布
            #cav01{
                600px;
                height:150px;
                margin:auto;
            }
    
         //时钟画布
            #cav02{
                420px;
                height:420px;
                margin:auto;
            }
        </style>
    </head>
    <body onload="init()">
    <div id="cav01">
        <canvas id="canvas01" width="600" height="100" margin=auto></canvas>
    </div>
    <div id="cav02">
        <canvas id="canvas" width="390" height="390" margin=auto></canvas>
    </div>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/requestAnimFrame.js"></script>    
    </body>
    </html>

    二,绘制时钟的js部分:

    这里需要用到两个js文件

    1,时钟js:

    var can01;
    var ctx01;
    var can;
    var ctx;
    
    function init(){
        can01=document.getElementById('canvas01');
        ctx01=can01.getContext("2d");
        can=document.getElementById('canvas');
        ctx=can.getContext("2d");
        time();
        run();
    }
    
    //时间
    function time(){
        window.requestAnimFrame(time);
        ctx01.clearRect(0,0,600,100); //清除上次的绘画 放在每次绘画之前
        shuaxin();
    }
    
    //循环调用run
    function run(){
        window.requestAnimFrame(run);
        drawbiaopan();
        drawkedu();
        biaozhen();
    }
    
    //画表盘
    function drawbiaopan(){
        //arc(x,y,r,sAngle,eAngle,counterclockwise)
        //x,y圆的中心坐标,r圆的半径,sAngle,eAngle圆的起始终点,
        //counterclockwise可选,表示画圆逆时针还是顺时针False为顺时针,true为逆时针
        ctx.clearRect(20,20,390,390);
        ctx.beginPath();
        ctx.arc(200,200,180,0,2*Math.PI,false);
        ctx.lineWidth=5;
        ctx.strokeStyle="微软雅黑";
        ctx.stroke();
        ctx.closePath();
    }
    
    //画刻度盘
    function drawkedu(){
        //时钟
        for(var i=0;i<12;i++)
        {
            ctx.save();
            ctx.translate(200,200);
            ctx.lineWidth=2;
            ctx.strokeStyle="green";
            ctx.rotate(i*30*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-165);
            ctx.lineTo(0,-180);
            ctx.font="100 14px 宋体";
            ctx.textAlign="left";
            ctx.textBaseLine="top";
    
       if(i==0){
    
           ctx.strokeText(12,i*(-20)*Math.PI/120,-150);
        }else{
    
           ctx.strokeText(i,i*(-20)*Math.PI/120,-150);
    
        }
          
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        //分钟
        for(var i=0;i<60;i++)
        {
            ctx.save();
            ctx.translate(200,200);
            ctx.lineWidth=1;
            ctx.strokeStyle="green";
            ctx.rotate(i*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-170);
            ctx.lineTo(0,-180);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
    }
    
    //画表针
    function biaozhen(){
        var now=new Date();
        var sec=now.getSeconds();
        var mins=now.getMinutes();
        var hours=now.getHours();
        hours=hours+mins/60+sec/3600;
        mins=mins+sec/60;
    
        //时针
        ctx.save();
        ctx.translate(200,200);
        ctx.lineWidth=3;
        ctx.strokeStyle="grey";
        ctx.rotate(hours*30*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(0,-70);//圆心起点
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    
        //分针
        ctx.save();
        ctx.translate(200,200);
        ctx.lineWidth=2;
        ctx.strokeStyle="#000";
        ctx.rotate(mins*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,0);//起点坐标
        ctx.lineTo(0,-105);//终点坐标
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    
        //秒针
        ctx.save();
        ctx.translate(200,200);
        ctx.lineWidth=1;
        ctx.strokeStyle="red";
        ctx.rotate(sec*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(0,-130);//圆心起点
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    
    function shuaxin(){
        var now=new Date();
        var sec=now.getSeconds();
        var mins=now.getMinutes();
        var hours=now.getHours();
        ctx01.save();
        ctx01.beginPath();
        ctx01.fillStyle="red";
        ctx01.strokeStyle="red"
        ctx01.font="bold 40px 微软雅黑";
    
        //清除上次的时间
    
       //这块代码有点冗余,但是还没有想到有什么好的处理办法,以后再改吧
    
    
        if(hours<10){
            if(mins<10){
                if(sec<10){
                    //hours<10&&mins<10&&sec<10
                    ctx01.strokeText('本地时间:'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
                    ctx01.fillText('本地时间:'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
                }else{
                    //hours<10&&mins<10&&sec>10
                    ctx01.strokeText('本地时间:'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
                    ctx01.fillText('本地时间:'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
                }
            }else{
                //hours<10&&mins>10&&sec<10
                if(sec<10){
                    ctx01.strokeText('本地时间:'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
                    ctx01.fillText('本地时间:'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
                }else{
                    //hours<10&&mins>10&&sec>10
                    ctx01.strokeText('本地时间:'+'0'+hours+':'+mins+':'+sec,100,80);
                    ctx01.fillText('本地时间:'+'0'+hours+':'+mins+':'+sec,100,80);
                }
            }
        }
        else{
            if(mins<10){
                if(sec<10){
                    //hours>10&&mins<10&&sec<10
                    ctx01.strokeText('本地时间:'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
                    ctx01.fillText('本地时间:'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
                }else{
                    //hours>10&&mins<10&&sec>10
                    ctx01.strokeText('本地时间:'+hours+':'+'0'+mins+':'+sec,100,80);
                    ctx01.fillText('本地时间:'+hours+':'+'0'+mins+':'+sec,100,80);
                }
            }else{
                if(sec<10){
                    //hours>10&&mins>10&&sec<10
                    ctx01.strokeText('本地时间:'+hours+':'+mins+':'+'0'+sec,100,80);
                    ctx01.fillText('本地时间:'+hours+':'+mins+':'+'0'+sec,100,80);
                }else{
                    //hours>10&&mins>10&&sec>10
                    ctx01.strokeText('本地时间:'+hours+':'+mins+':'+sec,100,80);
                    ctx01.fillText('本地时间:'+hours+':'+mins+':'+sec,100,80);
                }
            }
        }
        ctx01.closePath();
        ctx01.restore();
    }

    2,做了兼容的requestAnimitionFrame循环函数

    window.requestAnimFrame = (function() {  
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||  
                    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {  
                        return window.setTimeout(callback, 1000 / 60);  
                    };  
            })();

     

  • 相关阅读:
    PyQt作品 – PingTester – 多点Ping测试工具
    关于和技术人员交流的一二三
    Pyjamas Python Javascript Compiler, Desktop Widget Set and RIA Web Framework
    Hybrid Qt applications with PySide and Django
    pyjamas build AJAX apps in Python (like Google did for Java)
    PyQt 维基百科,自由的百科全书
    InfoQ:请问为什么仍要选择Java来处理后端的工作?
    Eric+PyQt打造完美的Python集成开发环境
    python select module select method introduce
    GUI Programming with Python: QT Edition
  • 原文地址:https://www.cnblogs.com/wgj32/p/5700528.html
Copyright © 2011-2022 走看看