小练一下canvas版简单时钟与css3版漂亮时钟

最新推荐文章于 2025-05-13 17:20:12 发布

dearcai11112

最新推荐文章于 2025-05-13 17:20:12 发布

阅读量143

点赞数 1

原文链接：http://www.cnblogs.com/pannysp/archive/2013/03/29/2988844.html

版权

本文分享了使用Canvas和CSS3两种方式实现时钟效果的详细过程，包括代码示例和在线演示链接，展示了不同技术在实现相同功能时的风格差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无聊时候用canvas练了一下时钟，但感觉画面不是很舒服，可能canvas用的不是很精炼。

随后又用css3重写了下，还是蛮漂亮的，呵呵，先看效果图吧；

canvas版:

CSS3版：

在线浏览：http://runjs.cn/detail/a9lrocko

canvas版源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas时钟</title>
<style>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.canvas_inner{ margin:0 auto; width:400px; padding-top: 100px;}
</style>
</head>
<body>
<div class="canvas_inner">
    <canvas id="clock" width="400" height="400"></canvas>
</div>
<script>
window.onload = function() {
    var winHeight = document.documentElement.clientHeight;
    document.getElementsByTagName('body')[0].style.height = winHeight+'px';
};

(function(doc){
    var can = doc.getElementById('clock');
    if(can.getContext){
        var con=can.getContext("2d");
        con.beginPath();
        con.translate(200,200);
        //绘制外圆
        con.strokeStyle="#fff";
        con.fillStyle = '#fff';
        con.arc(0,0,199,0,Math.PI*2,false);
        con.fill();

        // 绘制内圆
        con.beginPath();
        con.fillStyle = '#ccc';
        con.arc(0,0,195,0,Math.PI*2,false);
        con.fill();

        //绘制小时12
        con.beginPath();
        con.font = "bold 20px Arial";
        con.textAlign="center";
        con.textBaseline = "middle";
        con.fillStyle = '#f00';
        con.fillText("12",0,-170);
        con.fillText("1",172,0);
        con.fillText("3",172,0);
        con.fillText("6",0,170);
        con.fillText("9",-170,0);
        // con.save();
        var d=new Date(),time={};
        time.H = d.getHours()%12;
        time.M = d.getMinutes();
        time.S = d.getSeconds();

        function getTimeData(){
            time.S++;
            if(time.S>59){
                time.S = 0;
                time.M++;
                if(time.M>59){
                    time.M = 0;
                    time.H++;
                    if(time.H>11){
                        time.H = 0;
                    }
                }
            }
            canvasTimeLine();
        }

        function transNumberToDeg(num){
            return ((num*6-90)*0.017453293);
        }

        function canvasLineMintus(){
                // 
            var rec = 180
            for(var i=0;i<60;i++){
                con.beginPath();
                if(i%5 == 0){
                    con.lineWidth =4;
                    rec=180;
                }else{
                    con.lineWidth =1;
                    rec=184
                }
                
                var beginDeg=transNumberToDeg(i),
                beginPot = computePositionByLenAndDeg(rec,beginDeg),
                endPot = computePositionByLenAndDeg(190,beginDeg);
                con.moveTo(beginPot.x,beginPot.y);
                con.lineTo(endPot.x,endPot.y);
                
                con.stroke();
            }
        }

        function computePositionByLenAndDeg(len,deg){
            return {
                x:len*Math.cos(deg),
                y:len*Math.sin(deg)
            }
        }

        function canvasTimeLine(){
            var sDeg = transNumberToDeg(time.S),
            mDeg = transNumberToDeg(time.M),
            hDeg = transNumberToDeg(time.H*5+Math.floor(time.M/12)),
            sPot = computePositionByLenAndDeg(150,sDeg),
            mPot = computePositionByLenAndDeg(140,mDeg),
            hPot = computePositionByLenAndDeg(120,hDeg);

            con.beginPath();
            con.arc(0,0,156,0,Math.PI*2,false);
            con.fillStyle = '#f4f4f4';
            con.fill();

            // 绘制针心
            con.beginPath();
            con.fillStyle = '#ddd';
            con.arc(0,0,8,0,Math.PI*2,false);
            con.fill();
            
             // 绘制时针
            con.beginPath();
            con.moveTo(0,0);
            con.lineTo(hPot.x,hPot.y);
            con.lineWidth =6;
            con.strokeStyle = '#333';
            con.stroke();
            // 绘制分针
            con.beginPath();
            con.moveTo(0,0);
            con.lineTo(mPot.x,mPot.y);
            con.lineWidth =3;
            con.stroke();

            // 绘制秒针
            con.beginPath();
            con.moveTo(0,0);
            con.lineTo(sPot.x,sPot.y);
            con.stroke();
            // con.restore();
            // con.save();
        }
        getTimeData();
        setInterval(function(){
            getTimeData();
        },1000);
        canvasLineMintus();
    }
})(document);
  </script></body>
</html>

CSS3版源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3+js打造漂亮时钟</title>
<style>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.box{padding-top: 100px; width:410px; margin: 0 auto;}
.clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); }
.clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;}
.clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;}
.clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; }
.clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;}
.clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;}
.clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;}
.clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;}
.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;}
.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; }
</style>
</head>
<body>

<div class="box">
    <div class="clock" id="clock">
        <div class="clock-xin"></div>
        <div class="clock-xin2"></div>
        <div id="date" class="date"></div>
        <div id="hour" class="hour"></div>
        <div id="min" class="min"></div>
        <div id="sec" class="sec"></div>
    </div>
</div>

<script>
window.onload = function() {
    var winHeight = document.documentElement.clientHeight;
    document.getElementsByTagName('body')[0].style.height = winHeight+'px';

    var $clock = document.getElementById('clock'),
        $date = document.getElementById('date'),
        $hour = document.getElementById('hour'),
        $min = document.getElementById('min'),
        $sec = document.getElementById('sec'),
        oSecs = document.createElement('em');
    for (var i = 1; i < 61; i++) {
        var tempSecs = oSecs.cloneNode(),
        pos = getSecPos(i);
        if(i%5==0){
            tempSecs.className = 'ishour';
            tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>';
        }
        tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);';
        $clock.appendChild(tempSecs);
    }

    // 圆弧上的坐标换算
    function getSecPos(dep) {
        var hudu = (2*Math.PI/360)*6*dep,
        r = 200; //半径大小
        return {
            x: Math.floor(r + Math.sin(hudu)*r),
            y: Math.floor(r - Math.cos(hudu)*r),
        }
    }


    ;(function() {
        // 当前时间
        var _now = new Date(),
        _h = _now.getHours(),
        _m = _now.getMinutes(),
        _s = _now.getSeconds();

        var _day = _now.getDay();
        _day = (_day==0)?7:_day;
        $date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day;
        //绘制时钟
        var gotime = function(){
            var _h_dep = 0;
            _s++;
            if(_s>59){
                _s=0;
                _m++;
            }
            if(_m>59){
                _m=0;
                _h++;
            }
            if(_h>12){
               _h = _h-12;
            }

            //时针偏移距离
            _h_dep = Math.floor(_m/12)*6; 

            $hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);';
            $min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);';
            $sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);';

        };

        gotime();
        setInterval(gotime, 1000);
    })();

};


</script>
</body>
</html>

转载于:https://www.cnblogs.com/pannysp/archive/2013/03/29/2988844.html