clock done set System time
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();
getAndSetCurrentTime();
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;
//alert(counterClockHours);
// Create gradient
ctxline.font="30px Verdana";
ctxline.textAlign = 'center';
gradient.addColorStop("0.5","red");
ctxline.fillStyle=gradient;
ctxline.fillText(val,xClockHours,yClockHours);
});
}
function getAndSetCurrentTime(){
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" +...