HTML5 Canvas LED 时钟

源码

     // 获取到舞台
             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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。 

 

转载于:https://www.cnblogs.com/loujady/archive/2011/12/14/2287577.html