canvas 时钟 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>canvas-clock</title>
        
    </head>
    <body>
        <canvas id="myCanvas" class="canvas" width="150" height="150" style="border:1px solid #d3d3d3;margin: 0 auto;display: block;">

        </canvas>
        
        <script>
            var clock = function(){
                var canvas = document.querySelector("#myCanvas");
                if(canvas && canvas.getContext)
                {
                    var cxt = canvas.getContext("2d");
                    cxt.save();//保存状态
                    cxt.clearRect(0,0,150,150);//清理画布
                    cxt.translate(75,75);//以（75，75）为原点
                    cxt.scale(0.5,0.5);//缩放
                    cxt.rotate(-Math.PI/2);//逆转90°
                    //=======================================
                    //表盘
                    cxt.beginPath();
                    cxt.lineWidth= 30;
                    var gld = cxt.createLinearGradient(0,0,50,75);
                    gld.addColorStop(0,"#e0e3ec");
                    gld.addColorStop(1,"#9aa0a0");
                    cxt.strokeStyle = gld;
                    var grd = cxt.createRadialGradient(0,0,0,0,0,150);
                    grd.addColorStop(0,"#ccc");
                    grd.addColorStop(1,"#ccc");
                    cxt.fillStyle = grd;
                    cxt.arc(0,0,135,0,Math.PI*2,true);
                    cxt.stroke();
                    cxt.fill();
    
                    cxt.strokeStyle = "#969696";
                    cxt.lineCap = "square";
                    cxt.save();
                    cxt.lineWidth = 8;
                    cxt.beginPath();
                    for (var i = 0;i<12;i++) {
                        cxt.rotate(Math.PI/6);
                        cxt.moveTo(100,0);
                        cxt.lineTo(120,0);
                        cxt.stroke();
                    }
                    cxt.restore();
                    
                    //分钟刻度
                    cxt.save();
                    cxt.lineWidth = 5;
                    for(i=0;i<60;i++){
                        if (i%5!=0) {
                            cxt.beginPath();
                            cxt.moveTo(132,0);
                            cxt.lineTo(120,0);
                            cxt.stroke();
                        }
                        cxt.rotate(Math.PI/30);
                    }
                    cxt.restore();
                    
                    var now = new Date();
                    var sec = now.getSeconds();
                    var min = now.getMinutes();
                    var hr = now.getHours();
                    hr= hr>12?hr-12:hr;
                    //时针
                    cxt.save();
                    cxt.rotate(hr*(Math.PI/6)+(Math.PI/360)*min + (Math.PI/21600)*sec);
                    cxt.lineWidth = 9;
                    cxt.beginPath();
                    cxt.moveTo(-20,0);
                    cxt.lineTo(70,0);
                    cxt.stroke();
                    cxt.restore();
                    //分针
                    cxt.save();
                    cxt.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
                    cxt.lineWidth = 6;
                    cxt.beginPath();
                    cxt.moveTo(-28,0);
                    cxt.lineTo(90,0);
                    cxt.stroke();
                    cxt.restore();
                    //秒针
                    cxt.save();
                    cxt.rotate((Math.PI/30)*sec);
                    cxt.lineWidth = 3;
                    cxt.beginPath();
                    cxt.moveTo(-30,0);
                    cxt.lineTo(120,0);
                    cxt.stroke();
                    cxt.restore();
                    
                    //中心点
                    cxt.beginPath();
                    cxt.fillStyle = "#969696";
                    cxt.arc(0,0,8,0,Math.PI*2,true);
                    cxt.fill();
                    
                    cxt.restore();
                }
            }
            setInterval(clock,1000);

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

 

posted @ 2015-04-06 15:40  暗尘掩月  阅读(276)  评论(0)    收藏  举报