<body>
<!--Below div not used for this pen but is an alternate display method for text as explained in the JS:
<div id="time"></div>
***********************
* outer pie = seconds
* middle pie = minutes
* inner pie = hours
**********************
!-->
<canvas id="canv" width="500" height="500"></canvas>
</body>@import url(https://fonts.googleapis.com/css?family=Noto+Serif:700);
body{
margin: 0;
background: hsla(180, 95%, 15%, 1);
font-family: 'Noto Serif', serif;
font-size: 4em;
overflow:hidden;
width:100%;
}
canvas {
left: 50%;
position: absolute;
top :50%;
transform :translate( -50%, -50% );
}
/* #time font styling if using a div instead of canvas to display text
#time{
position: absolute;
margin-left:40vw;
margin-top:5%;
top: 0;
left: 0;
width: 500px;
color:hsla(255,255%,255%,0.7);
font-weight:bold;
text-align: center;
line-height: 500px;
z-index:1;
text-shadow:hsla(180, 85%, 5%, 1) 1px 1px,
hsla(180, 85%, 5%, .6) 2px 2px,
hsla(180, 85%, 5%, .6) 3px 3px,
hsla(180, 85%, 5%, .6) 4px 4px,
hsla(180, 85%, 5%, .6) 5px 5px,
hsla(180, 85%, 5%, .6) 6px 6px,
hsla(180, 85%, 5%, .6) 7px 7px,
hsla(180, 85%, 5%, .6) 8px 8px,
hsla(180, 85%, 5%, .6) 9px 9px,
hsla(180, 85%, 5%, .6) 11px 11px,
hsla(180, 85%, 5%, .6) 12px 12px,
hsla(180, 85%, 5%, .6) 13px 13px,
hsla(180, 85%, 5%, .6) 14px 14px,
hsla(180, 85%, 5%, .6) 15px 15px,
hsla(180, 85%, 5%, .6) 16px 16px,
hsla(180, 85%, 5%, .6) 17px 17px,
hsla(180, 85%, 5%, .6) 18px 18px,
hsla(180, 85%, 5%, .6) 19px 19px,
hsla(180, 85%, 5%, .6) 20px 20px,
hsla(180, 85%, 5%, .6) 21px 21px,
hsla(180, 85%, 5%, .6) 22px 22px,
hsla(180, 85%, 5%, .6) 23px 23px,
hsla(180, 85%, 5%, .6) 24px 24px,
hsla(180, 85%, 5%, .6) 25px 25px,
hsla(180, 85%, 5%, .6) 26px 26px,
hsla(180, 85%, 5%, .6) 27px 27px,
hsla(180, 85%, 5%, .6) 28px 28px,
hsla(180, 85%, 5%, .6) 29px 29px,
hsla(180, 85%, 5%, .6) 30px 30px;
}
*/var c = document.getElementById('canv');
var $ = c.getContext('2d');
var ang = 0;
var secondsColor = 'hsla(180, 85%, 5%, .7)';
var minutesColor = 'hsla(180, 95%, 15%, 1)';
var hoursColor = 'hsla(180, 75%, 25%, 1)';
var currentHr;
var currentMin;
var currentSec;
var currentMillisec;
var t = setInterval( 'updateTime()', 50 );
function updateTime(){
var currentDate = new Date();
var g = $.createRadialGradient(250,250,.5,250,250,250);
g.addColorStop(0, 'hsla(180, 55%, 8%, 1)');
g.addColorStop(1, 'hsla(180, 95%, 15%, 1)');
$.fillStyle = g;
$.fillRect( 0, 0, c.width, c.height );
currentSec = currentDate.getSeconds();
currentMillisec = currentDate.getMilliseconds();
currentMin = currentDate.getMinutes();
currentHr = currentDate.getHours();
if(currentHr == 00){ //if midnight (00 hours) hour = 12
currentHr=12;
}
else if (currentHr >= 13 ){ //convert military hours at and over 1300 (1pm) to regular hours by subtracting 12.
currentHr -=12;
}
drawSeconds();
drawMinutes();
drawHours();
var realTime = currentHr + ':' + numPad0( currentMin ) + ':' + numPad0( currentSec );
/*Here is the selected option of creating the text within the pie canvas elemenet */
var textPosX = 250 - ( $.measureText(realTime).width / 2 );
$.shadowColor = 'hsla(180, 100%, 5%, 1)';
$.shadowBlur = 100;
$.shadowOffsetX = 12;
$.shadowOffsetY = 0;
$.fillStyle = 'hsla(255,255%,255%,.7)';
$.font = "bold 1.6em 'Noto Serif', serif";
$.fillText( realTime, textPosX, c.height/2+50);
/* OR using a div to display the time (#time) where I pre-styled text with a long shadow using css...can't decide which I like better - but since this is a canvas demo....; (comment out the above text settings and uncomment the below)
document.getElementById('time').innerHTML = realTime;
*/
}
function drawSeconds(){
ang = 0.006 * ( ( currentSec * 1000 ) + currentMillisec );
$.fillStyle = secondsColor;
$.beginPath();
$.moveTo( 250, 250 );
$.lineTo( 250, 50 );
$.arc( 250, 250, 200, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
$.shadowColor = 'hsla(180, 45%, 5%, .4)';
$.shadowBlur =15;
$.shadowOffsetX = 15;
$.shadowOffsetY = 15;
$.fill();
}
function drawMinutes(){
ang = 0.0001 * ( ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
$.fillStyle = minutesColor;
$.beginPath();
$.moveTo( 250, 250 );
$.lineTo( 250, 100 );
$.arc( 250, 250, 150, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
$.shadowColor = 'hsla(180, 25%, 5%, .4)';
$.shadowBlur =15;
$.shadowOffsetX = 15;
$.shadowOffsetY = 15;
$.fill();
}
function drawHours(){
ang = 0.000008333 * ( ( currentHr * 60 * 60 * 1000 ) + ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
if( ang > 360 ){
ang -= 360;
}
$.fillStyle = hoursColor;
$.beginPath();
$.moveTo( 250, 250 );
$.lineTo( 250, 150 );
$.arc( 250, 250, 100, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
$.shadowColor = 'hsla(180, 45%, 5%, .4)';
$.shadowBlur =15;
$.shadowOffsetX = 15;
$.shadowOffsetY = 15;
$.fill();
}
function calcDeg( deg ){
return (Math.PI/180) * (deg - 90);
}
//handle zeros for minutes and seconds
function numPad0( str ){
var cStr = str.toString();
if( cStr.length < 2 ){
str = 0 + cStr;
}
return str;
}
window.addEventListener('resize', function(){
c.width = 500;
c.height = 500;
});
External CSS
This Pen doesn't use any external CSS resources.