canvas的实例--时钟动画-

var clock=(function(){function _canvasClock(){var cvs=document.getElementById(&＃39;canvas&＃39;);var ctx=cvs.getContext(&＃39;2d&＃39;);var PI=Math.PI;var lineWidth=5;                                             //线宽var gradient=ctx.createLinearGradient(10,10,580,580);        //设置圆的颜色渐变gradient.addColorStop("0","#a251ff");
        gradient.addColorStop(1,"#2ec2ff");
        ctx.fillStyle = &＃39;#ef6670&＃39;;
        ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var secOnd=time.getSeconds();                            //秒var Minute=time.getMinutes();                            //分var hour=time.getHours();                                //时//hour=hour+Minute/60;hour=hour>12?hour-12:hour;                               //表盘只有12小时            
            ctx.clearRect(0,0,600,600);                              //清空给定矩形内的指定像素//画圆            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,290,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();
            
            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,10,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();            for(var i=0;i<60;i++){  
                ctx.save();                        　//保存之前画布状态   ctx.lineWidth=4;                　　 //设置分针的粗细                 ctx.strokeStyle="#616161";          //设置分针的颜色                 ctx.translate(300,300);             //画布圆点设置        ctx.rotate(i*PI/30);                //角度*Math.PI/180=弧度,设置旋转角度 
                ctx.beginPath();                    //开始一条路径ctx.moveTo(0,-287);                 //相对画布圆点路径的起点ctx.lineTo(0,-283);                 //相对画布圆点路径的终点ctx.closePath();                    //结束一条路径ctx.stroke();                       //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径ctx.restore();                      //restore() 方法将绘图状态置为保存值            }            for(var i=0;i<12;i++){
                ctx.save();
                ctx.lineWidth=4;
                ctx.strokeStyle=gradient;    
                ctx.translate(300,300);   
                ctx.rotate(i*PI/6);                ctx.beginPath();  
                ctx.moveTo(0,-287);
                ctx.lineTo(0,-278); 
                ctx.closePath();  
                ctx.stroke();  
                ctx.restore();  
            }            //时针              ctx.save();           
            ctx.lineWidth=3;                  
            ctx.strokeStyle="#0f0f0f";                
            ctx.translate(300,300);
            ctx.rotate(hour*PI/6+second*PI/108000);  
            ctx.beginPath();  
            ctx.moveTo(0,-238);
            ctx.lineTo(0,10);  
            ctx.closePath();  
            ctx.stroke();  
            ctx.restore();  
            //分针              ctx.save();  
            ctx.lineWidth=3;  
            ctx.strokeStyle="#010101";  
            ctx.translate(300,300);  
            ctx.rotate(Minute*PI/30+second*PI/1800);  
            ctx.beginPath();  
            ctx.moveTo(0,-258);  
            ctx.lineTo(0,15);  
            ctx.closePath();  
            ctx.stroke();
            ctx.restore();  
          
              //秒针                          ctx.save();  
            ctx.strokeStyle="#ff100d";  
            ctx.lineWidth=3;  
            ctx.translate(300,300);               
            ctx.rotate(second*PI/30);               
            ctx.beginPath();
            ctx.moveTo(0,-278);  
            ctx.lineTo(0,20);  
            ctx.closePath();  
            ctx.stroke();  
            
            ctx.beginPath();                        //时针分针秒针交点  ctx.arc(0,0,6,0,2*PI,false);
            ctx.closePath();                  
            ctx.fillStyle="#fff";
            ctx.fill();               
            ctx.stroke();     
            ctx.restore();  
            requestAnimationFrame(drawBig);            //实现动画修改的接口        };
        drawBig();
        setInterval(drawBig,1000);                    //每1s重绘一次    };return{
        canvasClock:_canvasClock,
    }
}())