54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
|
var canvas = document.getElementById("canvas");
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
ctx.strokeStyle = '#00ffff';
|
||
|
|
ctx.lineWidth = 17;
|
||
|
|
ctx.shadowBlur= 15;
|
||
|
|
ctx.shadowColor = '#00ffff'
|
||
|
|
|
||
|
|
function degToRad(degree){
|
||
|
|
var factor = Math.PI/180;
|
||
|
|
return degree*factor;
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTime(){
|
||
|
|
var now = new Date();
|
||
|
|
var today = now.toDateString();
|
||
|
|
var time = now.toLocaleTimeString();
|
||
|
|
var hrs = now.getHours();
|
||
|
|
var min = now.getMinutes();
|
||
|
|
var sec = now.getSeconds();
|
||
|
|
var mil = now.getMilliseconds();
|
||
|
|
var smoothsec = sec+(mil/1000);
|
||
|
|
var smoothmin = min+(smoothsec/60);
|
||
|
|
|
||
|
|
//Background
|
||
|
|
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
|
||
|
|
gradient.addColorStop(0, "#03303a");
|
||
|
|
gradient.addColorStop(1, "black");
|
||
|
|
ctx.fillStyle = gradient;
|
||
|
|
//ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
|
||
|
|
ctx.fillRect(0, 0, 500, 500);
|
||
|
|
//Hours
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250,250,200, degToRad(270), degToRad((hrs*30)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
//Minutes
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250,250,170, degToRad(270), degToRad((smoothmin*6)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
//Seconds
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250,250,140, degToRad(270), degToRad((smoothsec*6)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
//Date
|
||
|
|
ctx.font = "25px Helvetica";
|
||
|
|
ctx.fillStyle = 'rgba(00, 255, 255, 1)'
|
||
|
|
ctx.fillText(today, 175, 250);
|
||
|
|
//Time
|
||
|
|
ctx.font = "25px Helvetica Bold";
|
||
|
|
ctx.fillStyle = 'rgba(00, 255, 255, 1)';
|
||
|
|
ctx.fillText(time+":"+mil, 175, 280);
|
||
|
|
|
||
|
|
}
|
||
|
|
setInterval(renderTime, 40);
|