clock done final

by rao b

HTML

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

JavaScript

var c = document.getElementById("myCanvas");
var ctxline = c.getContext("2d");
//variables
var seconds = 0,minutes = 0 , hours = 0;
var iSeconds = 0, counterSeconds = 0, xSeconds=180,ySeconds=0;
var increaseSeconds = 6 * Math.PI /180;
var iMinutes = 0, counterMinutes = 0, xMinutes=180,yMinutes=0;
var increaseMinutes = 6 * Math.PI /180;
var iHours = 0, counterHours = 0, xHours=180,yHours=0;
var increaseHours = 6 * Math.PI /180;
//ctxline.clearRect(0, 0, c.width, c.height);

//drawLinesInCircle();
clockDesign();
clock();
function clockDesign(){
    var iClockHours = 0, counterClockHours = 0, xClockHours=180,yClockHours=0;
    var increaseClockHours = 30 * Math.PI /180;
    var hours = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
    var gradient=ctxline.createLinearGradient(0,0,c.width,0);
    jQuery.each( hours, function( i, val ) {                 
        xClockHours = 180 + Math.sin(counterClockHours)* 140;
        yClockHours =  180 - Math.cos(counterClockHours)* 140;
        counterClockHours += increaseClockHours; 
        
        // Create gradient
        ctxline.font="30px Verdana";
        ctxline.textAlign = 'center';
        gradient.addColorStop("0.5","red");
        
        ctxline.fillStyle=gradient;
        ctxline.fillText(val,xClockHours,yClockHours);
        
    });
}


function clock(){
    //Seconds
    seconds += 1;
    xSeconds = 180 + Math.sin(counterSeconds)* 120;
    ySeconds =  180 - Math.cos(counterSeconds)* 120;    
    counterSeconds += increaseSeconds;
    iSeconds += 6;
    
    //minutes
    xMinutes = 180 + Math.sin(counterMinutes)* 110;
    yMinutes =  180 - Math.cos(counterMinutes)* 110;
    //hours
    xHours = 180 + Math.sin(counterHours)* 100;
    yHours =  180 - Math.cos(counterHours)* 100;
    
    if(seconds == 60){  
        //alert("one min");
        minutes +=1;
        seconds =0;
        counterMinutes += increaseMinutes; 
        iMinutes += 6;
    }
    
    if(minutes == 60){
        hours...