Timer Canvas Animation

index.html

<canvas id="canvas">
jacquelinclement.fr, canvas i love you.
</canvas>

script.js

	window.requestAnimFrame = function()
	{
		return (
			window.requestAnimationFrame       || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     || 
			function(/* function */ callback){
				window.setTimeout(callback, 1000 / 60);
			}
		);
	}();

    var canvas = document.getElementById('canvas'); 
    
    var context = canvas.getContext('2d');
    
var W = window.innerWidth, H = window.innerHeight;
	canvas.width = W;
	canvas.height = 2000;

	var particle_count = 16,
		particles = [],
radius = 90,
marginHeight = radius,
marginWidth = radius,
iIncr= 0,
		couleurs   = ["#2ecc71", "#3498db","#e74c3c","#F1C40F"];
function Particle(radius,y,x,numColor,timer,lineWidth,styleDessin)
{   
 this.radius = radius;
 this.x = x;
 this.y = y;
 this.color = couleurs[numColor];
 this.timer = timer;
 this.lineWidth = lineWidth;
 this.styleDessin = styleDessin;
  
 this.move = function()
 { 
  var dateDev  = new Date();
  if(this.timer == 0)
  {
   if(dateDev.getHours() > 12)
   {
     var heureModif = dateDev.getHours()-12;
   }
   else{var heureModif = dateDev.getHours();}
   var unite = heureModif + (dateDev.getMinutes() / 100) + (dateDev.getSeconds() / 10000);
   var diviseur = 6;
   var texte = dateDev.getHours();
  }
  if(this.timer == 1)
  {
   var unite  = dateDev.getMinutes() + (dateDev.getSeconds() / 100 );
   var diviseur = 30;
   var texte = unite;
  }
  if(this.timer == 2)
  {
   var unite  = dateDev.getSeconds() + (dateDev.getMilliseconds()/1000);
   var diviseur = 30;
   var texte = unite;
  }
  if(this.timer == 3)
  {
   var unite  = dateDev.getMilliseconds();
   var diviseur = 30;
   var texte = unite/100;
   var unite = unite/16.65;
  }
  context.beginPath();
  context.globalCompositeOperation = 'source-over';
  context.font                     = this.radius+"px Arial";
  context.textAlign                = 'center';
  context.textBaseline             = 'middle';
  context.fillStyle                = 'white';
  context.fillText(Math.floor(texte),this.x,this.y);
  context.globalCompositeOperation = 'destination-over';
  context.lineWidth                = this.lineWidth;
  context.fill();
  context.fillStyle                = this.color;
  context.strokeStyle              = this.color;
  if(this.styleDessin <= 3)
  {
   context.arc(this.x, this.y, this.radius, (Math.PI*1.5), (Math.PI)*(unite/diviseur)+(Math.PI*1.5), true);
   context.lineTo(this.x,this.y); 
   context.fill();
  }
  else if((this.styleDessin > 3) && (this.styleDessin <=7))
  {
    context.arc(this.x, this.y, this.radius, (Math.PI*1.5), (Math.PI)*(unite/diviseur)+(Math.PI*1.5), false);
   context.lineTo(this.x,this.y); 
   context.fill();
    
  }
  else if((this.styleDessin > 7) && (this.styleDessin <=11))
  {
    context.arc(this.x, this.y, (this.radius/8), (Math.PI*1.5), (Math.PI*-0.5), false);
    context.fill();
    context.moveTo(this.x,(this.y-radius));
    context.arc(this.x, this.y, this.radius, (Math.PI*1.5), (Math.PI*-0.5), false);
    context.arc(this.x, this.y, this.radius, (Math.PI*1.5), (Math.PI)*(unite/diviseur)+(Math.PI*1.5), true);
    context.lineTo(this.x,this.y);
    context.stroke();
  }
  else if((this.styleDessin > 11) && (this.styleDessin <=15))
  {
    context.arc(this.x, this.y, this.radius, (Math.PI)*(unite/diviseur), (Math.PI)*(unite/diviseur)+(Math.PI*1.5), true);
    context.stroke();
  }
            
            context.closePath();

          
        };
    };
    for (var i = 0; i < particle_count; i++)
    {
        
        var particle = new Particle(75,marginHeight,marginWidth,iIncr,iIncr,5,i);
        iIncr++;
        particles.push(particle);
        marginWidth = marginWidth + (radius*2);
        if(i == 3 || i == 7 || i == 11)
         {
           iIncr = 0;
           marginHeight = marginHeight + (radius*2);
           marginWidth = radius;
         }
       
        
      
    }


    function animate()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particle_count; i++)
        {
            particles[i].move();
        }
        requestAnimFrame(animate);
    }
    
    

   
    animate(); 

style.css

#canvas{background:#222;}
html{margin:0;padding:0;background:#222;}

Timer-Canvas-Animation.markdown

Timer Canvas Animation

I want a cool and beautiful timer for my own website. So, i do this one with canvas. :)

A Pen by Jak1 on CodePen.

License.