67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
|
|
||
|
|
|
||
|
|
function degToRad(degree){
|
||
|
|
var factor = Math.PI/180;
|
||
|
|
return degree*factor;
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTime(){
|
||
|
|
|
||
|
|
//Von der "Bib" Date now obj
|
||
|
|
var canvas = document.getElementById('canvas');
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
ctx.strokeStyle ='lightblue';
|
||
|
|
ctx.lineWidth = 17;
|
||
|
|
ctx.lineCap = 'round';
|
||
|
|
ctx.shadowBlur =15;
|
||
|
|
ctx.shadowColor='lightblue';
|
||
|
|
|
||
|
|
|
||
|
|
var now = new Date();
|
||
|
|
var today = now.toDateString();
|
||
|
|
var time = now.toLocaleTimeString();
|
||
|
|
var hour = now.getHours();
|
||
|
|
var minutes = now.getMinutes();
|
||
|
|
var seconds = now.getSeconds();
|
||
|
|
var milliseconds = now.getMilliseconds();
|
||
|
|
var newSeconds = seconds+(milliseconds/1000);
|
||
|
|
|
||
|
|
//Background
|
||
|
|
//außen innen
|
||
|
|
gradient = ctx.createRadialGradient(250,250,5, 250,250,300);
|
||
|
|
gradient.addColorStop(0, 'green');
|
||
|
|
gradient.addColorStop(1, 'black');
|
||
|
|
//ctx.fillStyle = 'grey';
|
||
|
|
ctx.fillStyle = gradient;
|
||
|
|
ctx.fillRect(0, 0, 500, 500);
|
||
|
|
|
||
|
|
//Hours (px),(px),radius,startpunkt
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250, 250, 200, degToRad(270), degToRad((minutes*15)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
//Minutes
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
//Seconds
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90));
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
//Date
|
||
|
|
ctx.font = "25px Arial bold";
|
||
|
|
ctx.fillStyle ='lightblue';
|
||
|
|
ctx.fillText(today, 175, 250);
|
||
|
|
|
||
|
|
//Time
|
||
|
|
ctx.font = "20px Arial ";
|
||
|
|
ctx.fillStyle ='lightblue';
|
||
|
|
ctx.fillText(time, 175, 280);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//renderTime();
|
||
|
|
|
||
|
|
|