代码改变世界

HTML5 Canvas LED 时钟

2011-12-14 14:48 by LoujaDy, ... 阅读, ... 评论, 收藏, 编辑

源码

    //获取到舞台
            var canvas=document.getElementById("stage");
            //舞台2d绘图接口
            var context=canvas.getContext("2d");
            //获取中心点置
            var centerX=canvas.width/2;
            var centerY=canvas.height/2;
            
            /**
            * Led灯
            
*/
           var Light=function(x,y,radius,color)
           {
                //灯中心点位置
                this.x=x;
                this.y=y;
                //灯的半径
                this.radius=radius;
                //灯的颜色
                this.color=color; 
                /**
                 * 打开灯
                 
*/ 
                this.On=function()
                {
                    //灯的边框颜色
                    context.strokeStyle = this.color;
                    //灯的发光颜色
                    context.fillStyle=this.color;                
                   context.beginPath(); 
                   context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
                   context.fill(); 
                   context.stroke();
                   context.closePath();
                }
                this.Off=function()
                {
                    context.clearRect(this.x-this.radius-1,this.y-this.radius-1,this.radius*2+2,this.radius*2+2);
                }
           } 
           
            //所有的灯            
            var lights=[];    
            //灯的大小        
            var lightSize=5;
            
            //灯的布局 点
            var startX=5;
            var startY=20;
            
            //布局灯
            function LayoutLight()
            {
                //开始布局 灯
                var rowStartX=startX;
                var rowStartY=startY;    
                //创建8组灯            
                for(var i=0;i<8;i++)
                {
                    var groups=[];
                    for(var j=0;j<7;j++)
                    {    
                        groups[j]=[];                    
                        var tempRowX=rowStartX;                
                        for(var k=0;k<4;k++)
                        {
                            var light=new Light(rowStartX,rowStartY,lightSize,"");                        
                            groups[j][k]=light;
                            //灯默认是关着的
                            groups[j][k].Off();
                            rowStartX+=lightSize*3;
                        }
                        rowStartY+=lightSize*3;
                        rowStartX=tempRowX;
                    }                
                    //重新定义行列起启位置
                    rowStartX+=lightSize*3*4+20;
                    rowStartY=startY;
                    lights[i]=groups;                
                }
            }
            
              //小时数颜色
            var hourColor="#ffcc00";
            
            //分钟数颜色
            var minColor="#ff0000";
            
            //秒种数颜色
            var secColor="#0000ff";
            
            //几组灯之间的分隔
            function LightSplit()
            {
                //绘制时分少分割点            
                //时分
                lights[2][2][2].color=hourColor;
                lights[2][2][2].On();
                lights[2][4][2].color=hourColor;
                lights[2][4][2].On();
    
                //分秒
                lights[5][2][2].color=minColor;
                lights[5][2][2].On();
                lights[5][4][2].color=minColor;
                lights[5][4][2].On();
            }
            
            
            
            //布局 灯
            LayoutLight();
            LightSplit();
            //打开灯的时间
            var openLightTime=new Date();
            //根据当前时间打开灯
            OpenLightByTime(openLightTime,true); 
            
                       
          
            //根据时间调整灯
            function OpenLightByTime(date,isFirst)
            {        
                    var nowHours  =date.getHours();
                    var nowMinutes=date.getMinutes();
                    var nowSencods=date.getSeconds();
                    
                    //当前规则
                    var currentRule=null;
                    
                    //小时    
                    if(nowHours>=10)
                    {
                            
                          currentRule=rules[parseInt(nowHours/10)];
                    }
                    else
                    {
                          currentRule=rules[0];
                    }
                    if(isFirst)
                    {
                        for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[0][currentRule.old[i].i][currentRule.old[i].j].color=hourColor;
                            //开灯
                            lights[0][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                        currentRule=rules[parseInt(nowHours%10)];
                        for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[1][currentRule.old[i].i][currentRule.old[i].j].color=hourColor;
                            //开灯
                            lights[1][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                    }
                    else if (nowHours!=openLightTime.getHours())
                    {                        
                        if(nowHours==0 && openLightTime.getHours()==23)
                        {
                            
                            Help(0,currentRule.twoToZero,hourColor);
                            Help(1,currentRule.threeToZero,hourColor);
                        }
                        else if(nowHours==0 && openLightTime.getHours()==11)
                        {
                            Help(0,currentRule.oneToZero,hourColor);
                            Help(1,currentRule.oneToZero,hourColor);
                        }
                        else
                        {                        
                            //获取到小时的变化规则
                            if(parseInt(nowHours/10)!=parseInt(openLightTime.getHours()/10))
                            {
                                Help(0,currentRule,hourColor);    
                            }                        
                            currentRule=rules[parseInt(nowHours%10)];
                            Help(1,currentRule,hourColor);                            
                         }
                        
                        //重新设定时间
                        openLightTime.setHours(nowHours);
                   }    
                                   
                    //分钟                                               
                      if(nowMinutes>=10)
                   {
                            
                      currentRule=rules[parseInt(nowMinutes/10)];
                   }
                   else
                   {
                        currentRule=rules[0];
                   }

                   if(isFirst)
                   {
                           for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[3][currentRule.old[i].i][currentRule.old[i].j].color=minColor;
                            //开灯
                            lights[3][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                        currentRule=rules[parseInt(nowMinutes%10)];
                        for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[4][currentRule.old[i].i][currentRule.old[i].j].color=minColor;
                            //开灯
                            lights[4][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                   }
                   else if (nowMinutes!=openLightTime.getMinutes())
                   {    
                           if(openLightTime.getMinutes()==59)
                           {
                               currentRule=currentRule.fiveToZero;
                           }
                             if(parseInt(nowMinutes/10)!=parseInt(openLightTime.getMinutes()/10))
                          {
                                Help(3,currentRule,minColor);    
                         }                            
                            currentRule=rules[parseInt(nowMinutes%10)];
                            Help(4,currentRule,minColor);
                        //重新设定分钟
                        openLightTime.setMinutes(nowMinutes);
                   }
            
                    
                    
                    //秒钟
                    if(nowSencods>=10)
                    {
                            
                        currentRule=rules[parseInt(nowSencods/10)];
                    }
                    else
                    {
                        currentRule=rules[0];
                    }                  
                    if(isFirst)
                       {
                           for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[6][currentRule.old[i].i][currentRule.old[i].j].color=secColor;
                            //开灯
                            lights[6][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                        currentRule=rules[parseInt(nowSencods%10)];
                        for(var i=0;i<currentRule.old.length;i++)
                        {
                            //设定灯的颜色
                            lights[7][currentRule.old[i].i][currentRule.old[i].j].color=secColor;
                            //开灯
                            lights[7][currentRule.old[i].i][currentRule.old[i].j].On();
                        }
                   }
                   else if (nowSencods!=openLightTime.getSeconds())
                   {    
                       
                           
                        if(openLightTime.getSeconds()==59)
                        {
                            currentRule=currentRule.fiveToZero;
                        }
                        if(parseInt(nowSencods/10)!=parseInt(openLightTime.getSeconds()/10))
                          {
                                 Help(6,currentRule,secColor);    
                         }
                        
                            currentRule=rules[parseInt(nowSencods%10)];
                            Help(7,currentRule,secColor);           
                        
                        //重新设定秒种
                        openLightTime.setSeconds(nowSencods);
                    }
                    
                    
            
            }                   
            
            //处理灯泡
            function Help(groupsId,rule,color)
            {
               for(var i=0;i<rule.add.length;i++)
                {
                    //设定灯的颜色
                    lights[groupsId][rule.add[i].i][rule.add[i].j].color=color;
                    //开灯
                    lights[groupsId][rule.add[i].i][rule.add[i].j].On();
                } 
                for(var i=0;i<rule.remove.length;i++)
                {
                    //关灯
                    lights[groupsId][rule.remove[i].i][rule.remove[i].j].Off();
                }
            }
                        
            
            
            //动画处理
            var drawAsync = eval(Jscex.compile("async", function () {                                            
                        while(true)
                        {
                          OpenLightByTime(new Date(),false);                    
                          $await(Jscex.Async.sleep(1000));
                        }    
                        
                                                                    
            }));
            drawAsync().start();            

 作者:Louja

出处:http://loujady.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。