A Pen by Opera House.

A-Pen-by-Opera-House.markdown

A Pen by Opera House

A Pen by Opera House on CodePen.

License.

index.html

<canvas id="canvas">
  Seu browser não suporta canvas do HTML5
</canvas>

script.js

  
  function clock(){
   
     var canvas = document.getElementById('canvas'),
         ctx    = canvas.getContext('2d');
     
     canvas.width = canvas.height =  200;
         
     var width, height, distance, radiusHours, font, time, clock;
     
     font         = "Trebuchet MS"; 
     radiusHours  = 0.8;
     width        = height = canvas.height;
     distance     = width/2 - width/11;
     
     clock = 
     { 
       frame    : 1000/60,
       day      : true,
       date     : new Date,
       pointers :{
        color   : "#000",
        alpha   : 0.9
       },
       background : {
        color   : ["#E5E5E5",'#FFF','#F3F2F2'],
        alpha   : 1,
       },
       lineTime : {
        color   : ["#000","#3D3D3D"],
        alpha   : 1 
       },
       marker   :{
        color   : ["#D9D9D9","#3D3D3D"],
        alpha   : 1 
       }
     };
     
     load();
     main_loop();
     
     function main_loop()
     {
       setTimeCurrent();
       time = setInterval(draw,clock.frame); 
     }
     
     function load()
     {
      var tam = width*0.1;
      ctx.save();
      ctx.font = tam+'px Trebuchet MS';
      ctx.fillStyle = '#000';
      ctx.fillText('Carregando...',width/2-tam*2,height/2); 
      ctx.restore();
     }
     
     function draw()
     {
       drawBackground();
       drawBackgroundClock();
       drawHours();
       drawHoursLine();
       drawMinutesLine();
       drawMarkerCenter();
       drawSecondsLine();
       drawMarkerSeconds();
       ctx.restore();
     }
     
     function drawBackground()
     {
       ctx.save();
       ctx.fillStyle = "none";
       ctx.clearRect(0,0,width,height);
       ctx.fillRect(0,0,width,height);
       ctx.translate(width/2,height/2);
     }
     
     function drawBackgroundClock()
     {
       var 
        ang = convertToRadians(180,180), 
        pi = 2 * Math.PI, 
        bg = clock.background;
       
       function circle(color, ang, end_ang, x, y, scX, scY, radial){
        ctx.save();
        ctx.beginPath();
        
        if(scX && scY) ctx.scale(scX,scY);
        
        ctx.globalAlpha = bg.alpha;
        
        ctx.arc(x, y, distance, ang, end_ang, false);
        
        if(radial)
        {
         color = ctx.createRadialGradient(75,50,5,0,0,100);
         color.addColorStop(1, bg.color[0]);
         color.addColorStop(0, bg.color[1]);
        }
        
        if(!color)
        {
         ctx.strokeStyle = "#ccc";
         ctx.lineWidth   = 5;
         ctx.stroke(); 
        }
        
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
        ctx.restore();
       }
       
       circle(null, 0, pi, 0, distance * Math.sin(convertToRadians(180,180)));
       circle(bg.color[2], 0, pi, 0, 0);
       circle(bg.color[0], ang, pi, 0, distance * Math.sin(convertToRadians(180,180)), 1, 0.4, true);
       circle(bg.color[0], ang, pi, 0, distance * Math.sin(convertToRadians(-180,180)), 1, -1, true);
     }
     
     function setTimeCurrent(){
      clock.hours    = clock.date.getHours();
      clock.minutes  = clock.date.getMinutes();
      clock.seconds  = clock.date.getSeconds();
     }
     
     function convertToRadians(degree,angulo) {
       return degree*Math.PI/angulo;
     }
     
     function toRadians(i,dif,total) {
       return (i-dif) * Math.PI * 2 / total;
     }
     
     function incrementSecond(){
       clock.date = new Date;
       setTimeCurrent();
       if( clock.hours >= 18 || clock.hours <= 6 ) updateClock();
     }
     
     function drawHoursLine(){
       drawPonteiro(clock.hours, 3, 12, 0.5, width*0.04, 
       clock.lineTime.color[0], clock.lineTime.color[1], 2, [10,50,50,50]);
     }
     
     function drawMinutesLine(){
       drawPonteiro(clock.minutes, 15, 60, 0.8, width*0.035,
        clock.lineTime.color[0], clock.lineTime.color[1], 2, [10,50,50,50]);
     }
     
     function drawSecondsLine()
     {
       drawPonteiro(clock.seconds, 15, 60, 0.75, 0.8, "#DB3E3E", "#DB3E3E",-2, [0,0,0,10]);
       incrementSecond();
     }
     
     function drawPonteiro(pointer, dif, total, heightLine, widthLine, color1, color2, x, g)
     {
       x = (x)? x : -10;
       ctx.save();
       ctx.rotate(toRadians(pointer,dif,total));
       ctx.globalAlpha = clock.lineTime.alpha;
       ctx.beginPath();
       ctx.moveTo(x,-widthLine);
       ctx.lineTo(x,widthLine);
       ctx.lineTo(distance * heightLine, 0);
       ctx.lineTo(distance * heightLine, -1);
       var my_gradient=ctx.createLinearGradient(g[0],g[1],g[2],g[3]);
       my_gradient.addColorStop(1,color1);
       my_gradient.addColorStop(0.5,color2);

       ctx.fillStyle = my_gradient;
       setShadow('#333', 10, 5, 5);
       ctx.fill();
       ctx.closePath();
       ctx.restore();
     }
     
     function setShadow(color, sblur, sX, sY)
     {
       ctx.shadowColor   = color;
       ctx.shadowBlur    = sblur;
       ctx.shadowOffsetX = sX;
       ctx.shadowOffsetY = sY; 
     }
     
     function drawHours()
     {
       var i, x, y, ang, dif, total, percentScreen;
       
       ctx.save();
       ctx.textAlign    = 'center';
       ctx.textBaseline = 'middle';
       dif              = 3;
       total            = 12;
       percentScreen    = width*0.1;
       for(i=1;i<=total;i++)
       {
        ctx.fillStyle   = clock.pointers.color;
        ctx.globalAlpha = clock.pointers.alpha;
        ang = toRadians(i,dif,total);
        x = distance * radiusHours * Math.cos(ang);
        y = distance * radiusHours * Math.sin(ang);
        ctx.font = "Bold "+percentScreen+"px "+font;
        ctx.fillText(i,x,y); 
       }
       ctx.restore();
     }
     
     function drawMarkerSeconds()
     { 
       var radial;
       ctx.save();
       ctx.rotate(toRadians(clock.seconds,15,60)-0.1);
       ctx.scale(1.5, 1);
       ctx.beginPath();
       ctx.arc(0.5,0,width*0.016,0,2*Math.PI);
       radial = ctx.createRadialGradient(0,0,50,50,10,100);
       radial.addColorStop(0,"#DB3E3E");
       radial.addColorStop(1,"#E73E45");
       ctx.fillStyle = radial;
       ctx.fill();
       ctx.closePath();
       ctx.restore();
     }
     
     function drawMarkerCenter()
     {
       var color = clock.marker.color;
       ctx.save();
       ctx.globalAlpha = clock.marker.alpha;
       ctx.beginPath();
       ctx.arc(0, 0, width*0.04 , 0, 2*Math.PI);
       ctx.fillStyle   = color[0];
       ctx.fill();
       ctx.lineWidth   = width*0.02;
       ctx.strokeStyle = color[1];
       ctx.stroke();
       ctx.closePath();
       ctx.restore(); 
     }
     
     function updateClock()
     { 
      if( clock.day )
      {
       var i, hours, bg, alpha, line, marker;
       alpha = 0.0625;
       
       clock.background.time;
       clock.pointers.time;
       clock.lineTime.time;
       clock.marker.time;
       
       clock.day   = false;
       bg          = clock.background;
       hours       = clock.pointers;
       line        = clock.lineTime;  
       marker      = clock.marker;
       i           = 1000/20.5;
       
       function fade(obj, to)
       {
         obj.alpha-=alpha;
         if(obj.alpha <= alpha) 
         {
          switch(to){
            case 1 : 
             animateHours();
             break;
            case 2:
             animateMarcador();
             break;
            case 3 :
             animateLine();
             break;
            case 4 :
             animateBg();
             break;
          }
         }
       }
       
       function animate(obj)
       {
         clearInterval(obj.time);
         obj.time = setInterval(function(){
            obj.alpha+=alpha;
            if(obj.alpha >= 1) clearInterval(obj.time);
         },i); 
       }
       
       hours.time  = setInterval(function(){fade(hours, 1)},i + i*0.4); // ANIMAR PONTEIROS MARCADORES DAS HORAS
       
       marker.time = setInterval(function(){fade(marker, 2)},i); // ANIMAR MARCADOR CENTRAL
       
       line.time   = setInterval(function(){fade(line, 3)},i); // ANIMAR PONTEIROS DE HORAS E MINUTOS
       
       bg.time     = setInterval(function(){fade(bg, 4)},i); // ANIMAR BACKGROUND 
       
       function animateBg()
       {
         bg.color[0]  = bg.color[1] = "#000";
         bg.color[2]  = "#333";
         animate(bg); 
       }
       
       function animateHours()
       { 
         hours.color  = "#fff";
         animate(hours);
       }
       
       function animateLine()
       {
         line.color[1] = line.color[0] = "#fff";
         animate(line);
       }
       
       function animateMarcador()
       {
        marker.color[0] = marker.color[1] = "#FFF";
        animate(marker); 
       }
       
      }// IF IS MORNING
     } // UPDATECLOCK
  }
  
  window.onload = clock;

style.css

  body{ background:#999}
  canvas{ color:#000; display:block}