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