Canvas画时钟

<!DOCTYPE HTML>
<html>
    <head>
        <meta chaset="utf-8" />
        <title>Canvas Clock</title>
        <style>
        a{color:#333;margin:0 10px;font-size:24px;}
        .ts{width:850px;text-align:center; height:100px;position:absolute;left:50%;top:50%;margin-top:-55px;margin-left:-405px;border:1px dotted #778855;background:#F5F5F5;padding:10px;}</style>
    </head>
    <body>
    </body>
</html>

JavaScript:

(function(){
                /*
                    Author:Jin.dh
                    Date:2012/3/5
                */
                function isIE(){    
                    var userAgent = navigator.userAgent; 
                    var isOpera = userAgent.indexOf("Opera") > -1; 
                    var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ;     
                    return IE;    
                };

                var box = {
                    w:150,
                    h:150,
                    b:"#ccc"
                };
                
                var clockAttr ={
                        x:75,
                        r:75,
                        y:75
                };
                
                //创建容器
                function $C(tag,father){
                    var o = document.createElement(tag||"div");
                    father = father || document.body;
                    father.appendChild(o);
                    return o;
                };
                
                //计时器
                var autoId = null;
                //初始化
                function init(){
                    if(isIE()){
                        var tsHTML = "<div class='ts'><h1 style='color:#f00'>您的浏览器暂不支持本Demo,请换成下面的浏览器试试:</h1>";
                            tsHTML+="  <a href='http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html' target='_blank'>chrome</a><a href='http://www.firefox.com.cn/download/' target='blank'>firefox</a><a href='http://www.opera.com/' target='_blank'>opera</a><a href='http://www.apple.com.cn/safari/' target='_blank'>safari</a></div>";
                        document.body.innerHTML = tsHTML;
                        return false;

                    };
                    canvas = $C("canvas");
                    canvas.width = box.w;
                    canvas.height = box.h;
                    ctx = canvas.getContext("2d");    
                    go();//开始
                };
                
                function go(){
                    autoId = setTimeout(function(){
                        drew();
                        go();
                    },1000);
                }
                    
                //画钟    
                function drew(){
                    ctx.clearRect(0,0,box.w,box.h)
                    var now = new Date();
                    var h = now.getHours();
                    var m = now.getMinutes();
                    var s = now.getSeconds();
                    var rGrd =ctx.createRadialGradient(clockAttr.r, clockAttr.r, clockAttr.r-20, clockAttr.r, clockAttr.r, clockAttr.r); //创建线形渐变 
                    rGrd.addColorStop(1, '#343537');  //最外边的颜色
                    rGrd.addColorStop(0.2,'#424242'); //靠近内层颜色
                    rGrd.addColorStop(0, '#fff');        //内圆
                    ctx.beginPath();
                    ctx.arc(clockAttr.x,clockAttr.y,clockAttr.r,0,Math.PI*2,true);
                    ctx.fillStyle = rGrd;
                    ctx.fill();
                    ctx.closePath();
                    
                    ctx.save();//存Canvas原坐标
                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
                    
                    ctx.strokeStyle = "#ccc";
                    for(var i =0;i<12;i++){
                        ctx.beginPath(); 
                        ctx.moveTo(0,-clockAttr.r+20); //始点
                        ctx.lineTo(0,-clockAttr.r+26); //终点
                        ctx.lineWidth = 1;                //线宽
                        if(i%3===0){                   //如果是3/6/9/12则加粗线条,颜色加深
                            ctx.strokeStyle = "#333";
                            ctx.lineWidth = 2;
                        };
                        ctx.stroke();
                        ctx.closePath();
                        ctx.rotate(360/12*Math.PI/180); //旋转画布
                    };
                    ctx.restore();
                    
                    //时针
                    ctx.save();//存Canvas原坐标
                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
                    ctx.lineWidth = 8;
                    //Math.PI/180为弧度算法.请参考数学“弧度”算法。
                    ctx.rotate((h*60+m)*(360/(12*60))*Math.PI/180); //弧度=当前分 * 每分多少度
                    ctx.beginPath();
                    ctx.moveTo(0,0);
                    ctx.lineTo(0,-30);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                    
                    //分针
                    ctx.save();//存Canvas原坐标
                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
                    ctx.rotate((m*60+s)*(360/(60*60))*Math.PI/180); //弧度=当前秒 * 每秒多少度 
                    ctx.fillStyle = "#000";
                    ctx.beginPath();
                    ctx.moveTo(0,0);
                    ctx.lineTo(0,-42);
                    ctx.lineWidth = 5;
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();

                    //秒针
                    ctx.save();//存Canvas原坐标
                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标
                    ctx.lineWidth = 3;
                    ctx.rotate(s*(360/60)*Math.PI/180);//弧度=当前秒 * 每秒多少度 
                    ctx.beginPath();
                    ctx.moveTo(0,0);
                    ctx.lineTo(0,-45);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                    
                    //中心圆点
                    ctx.beginPath();
                    ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
                    ctx.fillStyle = "#424242";
                    ctx.fill();
                    ctx.closePath();
                    
                    ctx.beginPath();            
                    var linear = ctx.createLinearGradient(clockAttr.x-10,clockAttr.y-10,clockAttr.x-10,clockAttr.y-8);
                        linear.addColorStop(0,"#ffffff");                        
                        linear.addColorStop(1,"#424242");    
                    ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
                    ctx.fillStyle = linear;
                    ctx.fill();
                    ctx.closePath();
                };
                
                //window onlaod
                function addLoad(fn){
                    var old = window.onload;
                    if(typeof old == "function"){
                        window.onload = function(){
                            fn();
                            old();
                        }
                    }else{
                        window.onload = fn;
                    }
                };

                    addLoad(init);//初始化
                })();

知识共享许可协议
《Canvas画时钟》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     165.72ms