clock test

by rao b

HTML

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

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for(i=0; i<360; i+= 10){
     ctx.moveTo(i+5,180);
    ctx.lineTo(i,180);

}
for(i=0; i<360; i+= 10){
 ctx.moveTo(180, i+5);
    ctx.lineTo(180,i);

}

ctx.stroke();

var iSin = 0, counterSin = 0, xSin=180,ySin=0;
var iCos = 0, counterCos = 0, xCos=0,yCos=180;
var iCircle = 0, counterCircle = 0, xCircle=180,yCircle=0;
var iLinesInCircle = 0, counterLinesInCircle = 0, xLinesInCircle=180,yLinesInCircle=0;
var iMinutes = 0, counterMinutes = 0, xMinutes=180,yMinutes=0;
var iHours = 0, counterHours = 0, xHours=180,yHours=0;
var increase = 90/180*Math.PI / 9;
var increaseLinesInCircle = 6 * Math.PI /180;
var increaseMinutes = 6 * Math.PI /180;
var increaseHours = 6 * Math.PI /180;
//drawSineWave();
//drawCosineWave();
//drawCircle();
drawLinesInCircle();
drawMinutes();
drawHours();

function drawSineWave(){
     ctx.beginPath();
     ctx.strokeStyle = ("#0C620B");
        ctx.lineWidth = 1;
     ctx.moveTo(xSin, ySin);     
     xSin = 180 + Math.sin(counterSin)* 180;
     ySin=  iSin;
     counterSin += increase;  
     ctx.lineTo(xSin,ySin);
     ctx.stroke();
     iSin += 10;
     if(iSin<=360){        
        setTimeout(drawSineWave, 100); 
     }
}


function drawCosineWave(){
     ctx.beginPath();
     ctx.strokeStyle = ("#BE1616");
        ctx.lineWidth = 1;
     ctx.moveTo(xCos,yCos);   
     xCos = iCos;
     yCos =  180 - Math.cos(counterCos)* 180;
     counterCos += increase;  
     ctx.lineTo(xCos,yCos);
     ctx.stroke();
     iCos += 10;
     if(iCos<=360){        
          setTimeout(drawCosineWave, 100); 
    }
}

function drawCircle(){
     ctx.beginPath();
     ctx.strokeStyle = ("#021A02");
        ctx.lineWidth = 1;
     ctx.moveTo(xCircle,yCircle);   
     xCircle = 180 + Math.sin(counterCircle)* 180;
     yCircle =  180 - Math.cos(counterCircle)* 180;
     counterCircle += increase;  
     ctx.lineTo(xCircle,yCircle);
     ctx.stroke();
     iCircle += 10;
    ...